Eventio

A project where the main concepts were developed during the STRV Frontend Academy 2022 and the details were completed afterwards.

Built With

• Next.js
• React.js

Getting Started

Follow this section to get the project running in your development machine.

Prerequisites

Before getting started, make sure you have these tools installed:

• Git
• Node.js v14
• Yarn

We recommend you use nvm to install Node.js.

Installation

Provided you have all prerequisites ready, you can install the application with the following command:

yarn

Environment variables

• NEXT_PUBLIC_API_URL - URL of the backend service
• NEXT_PUBLIC_API_KEY - API key for the backend service
• NEXT_PUBLIC_DEPLOYMENT_URL - URL where the application lives in production
• NEXT_PUBLIC_BASE_URL - URL for development (localhost)
• NEXT_PUBLIC_SENTRY_DSN - URL for connection with the Sentry(error logging) service

At Vercel, additional environment variables are needed to connect with Sentry. You can use Vercels's integration feature with Sentry, which will automatically set up these variables (SENTRY_AUTH_TOKEN, VERCEL_GIT_COMMIT_SHA, SENTRY_PROJECT, SENTRY_ORG).

Don't forget to extend the SENTRY_AUTH_TOKEN env variables visibility to 'Preview' to ensure your development preview builds are not failing.

Start the Application

To start a local server with the running application, run the following:

yarn dev

Deployment

The application is deployed at Vercel everytime new commits are pushed to the main branch (production mode) or to other branches (preview mode).

In case you need to deploy manually, you can install the Vercel CLI and run the following command: vercel

Roadmap

• Project setup
• List of events
  • Consume events from API
  • Present the list of events
  • Allow switching between past/future events
  • Allow switching between list/grid view modes
• Login
  • Create login form with client-side validation
  • Integrate form with API
  • Redirect user based on authentication status
• Create event
  • Create new event form with client-side validation
  • Integrate form with API
  • Redirect user to the list of events after creation
  • Refresh list of events upon creation
• Attend event button
  • Create reusable button component
  • Implement join/leave logic
  • Connect to API
  • Restrict the visibility for anonymous users
• Event details
  • Consume event details from API based on the ID in path
  • Create new component to show all the event details
  • Create new component to show all the attendees
• Edit event
  • Create pre-filled event form with client-side validation
  • Integrate form with API
  • Refactor attend button for event owners to show 'EDIT'
  • Restrict path to event owners
• User profile
  • Read user info from context
  • Show events where the user is the owner
  • Restrict path for anonymous users
• Register user
  • Create register form with client-side validation
  • Integrate form with API
  • Redirect user based on authentication status
  • Restrict register and login page for authenticated users

Important libraries used

• React
• React Hook Form - controlling forms
• React Context API - logged in user data and application wise UI state management
• React Query - asynchronous API side data state management
• Styled Components - styling the UI

Testing and documentation

• Storybook - for UI development
• Jest - unit test of functions and hooks
• Cypress - End2End tests

Note: This project was developed to explore various corners of frontend development and was not meant for regular production, therefore the tests and documentation are not complete.