Echo Web Frontend

Echo Web Frontend is the open-source Next.js and React frontend for the website of echo – the student association for informatics at the University of Bergen.

What is Echo Web Frontend?

Echo Web Frontend is a Next.js application that renders the full website of echo, maintained by volunteer informatics students in the echo Webkom subgroup. It takes content and data managed by the association and produces the public-facing web pages served to visitors. The project runs on Vercel and is developed in a public GitHub repository.

Key Features

• Next.js framework — Uses Next.js with React for server-rendered pages and routing.
• Chakra UI styling — The interface is built with the Chakra UI component library.
• Jest unit testing — A GitHub Actions workflow runs Jest tests on every push.
• Cypress end-to-end testing — A separate GitHub Actions workflow runs Cypress tests.
• Vercel deployment — The site is deployed on Vercel, as indicated by the "Powered by Vercel" badge.
• Feedback integration — Visitors can submit feedback through a Google Form linked in the README or email the team at [email protected].
• Developer onboarding — Includes a documented setup process with .env.example and yarn commands.
• Local development server — Runs at localhost:3000 with yarn dev after installing dependencies.

Who is it for?

Echo Web Frontend is primarily for the echo Webkom team, the volunteer student developers who maintain and extend the association's website. It is also useful for informatics students at UiB who want to contribute to a real open-source project. Other developer teams at student associations can use the repository as a reference for structuring a Next.js and Chakra UI frontend.

What can you do with it?

Developers: Clone the repository, install dependencies with yarn, copy .env.example to .env, and run yarn dev to launch the site locally at localhost:3000. Contributors: Add features, fix bugs, and submit pull requests; the repository has automated Jest and Cypress test workflows. Association members: Report issues or suggest changes through the linked Google Form or by emailing the Webkom steering group.

How does it work?

The README documents a five-step local development workflow: clone the Git repository, navigate into the folder, install dependencies with yarn, copy .env.example to a new .env file, and run yarn dev to start a local server at localhost:3000. CI pipelines execute Jest and Cypress tests via GitHub Actions on each push.

FAQ

How do I set up the project locally?

Follow the setup section in the README: clone the repo, run yarn to install dependencies, copy .env.example to .env, then run yarn dev and open localhost:3000.

What technologies does the frontend use?

It uses Next.js with React for the application framework and Chakra UI for styling and components. Testing is handled with Jest for unit tests and Cypress for end-to-end tests.

Who maintains this project?

The repository is maintained by echo Webkom, a subgroup of echo – the student association for informatics at the University of Bergen, made up of volunteer informatics students.

How can I give feedback about the website?

The README provides two channels: fill out a Google Form (linked as https://forms.gle/r9LNMFjanUNP7Gph9) or email [email protected].