eVenture Application

A School of Code event management and ticketing application for organising and delivering the community classes, another School of Code initiative to introduce people from diverse backgrounds to the world of tech. Working in a team of five people, we took on the challenge and we identified the pain points of participants and organisers for this problem. And the solution that we came up with was a web app that allows the bootcampers/organisers to create and manage the events and forthcoming participants to sign up to an upcoming event.

• Participants can login and sign up for an event.They also have the posibility to see the list of their upcoming events in My Events page, where they can also cancel their registration to a particular event .

• Organisers can create and edit events, a functionality to which only the organisers have access based on the access permisions associated to their account in the Auth0 dashboard.

• Organisers can track the attendance to a specific event.

If you want to see the backend code of this application head to this repository.

Live Project

Here is the deployed version.

Stack

• React with Next.js
• Auth0
• Cloudinary
• Material-UI
• Vercel

Getting Started

1. Make sure that you have Node.js installed and clone the repo.

git clone https://github.com/vmilitaru/eVenture-client.git
cd into the folder

2. Next, install all the package dependencies to run the app

npm install
# or
npm i

Configuring Auth0

3. Go to the Auth0 dashboard and create a new application of type Single Page Application and make sure to configure the following

4. Go to the settings tab of the application page

5. Configure the following settings:

   • Allowed Callback URLs: Should be set to http://localhost:3000 when testing locally or typically to https://myapp.com when deploying your application and any other URL to which you want the user to be redirected to after the autentication
   • Allowed Logout URLs: Should be set to http://localhost:3000/ when testing locally or typically to https://myapp.com/ when deploying your application or any other URL to which you want the user to be redirected to after loging out from Auth0
   • Allowed Web Origins: Should be set to http://localhost:3000/ when testing locally or typically to https://myapp.com/ when deploying your application
   • Allowed Origins (CORS): Should be set to http://localhost:3000/ when testing locally or typically to https://myapp.com/ when deploying your application

6. Everything else can stay as default

7. Save the settings

8. Go to the APIs page from the Auth0 dashboard and create an API. Based on the permisions that we are going to assign to this API we are restricting the users from accessing some of the project APIs.

9. To create the API you will need to fill in the following inputs:

   • Name : name the API
   • Identifier : logical identifier of the API - this field cannot be modified 👉 this is the audience that you need to add as environment variable in the .env.local file
   • Signing Algorithm : stays as default RS256

10. Go to the Settings tab of the new created API page and in the RBAC section configure the following settings:

    • Enable Enable RBAC option
    • Enable Add Permissions in the Access Token option

11. Save the settings

12. Stay on the new created API page but now go to Permisssions tab and add a permission to the API - remember by doing this we are making sure that we are allowing only certain users to have the organiser access permissions

use:role #Permission
Use permissions based on role #Description

13. Go to the Users & Roles> Roles page from the Auth0 dashboard and create a role :

organiser #Name
Access permissions based on the organiser role  #Description

15. Click on the Action menu (3 dots) of the new created role and select View details

16. Under Permissions tab of the new added role, organiser , page you will be able to ADD PERMISSIONS to the API that we created at Step 9 . Every time when we try to acess some protected APIs, we will return the permissions associated to the user account in the Access Token, validating the requests based on the user permissions.

17. To assign the organiser role to a particular user account if we stay on the new added role, organiser , page we just need to go on Users tab ADD USERS and select the account that we want to grant organiser permissions to. Another way of doing this is to go on Users & Roles >Actions > Assign To Users - easy as that .

18. It is not enough for us to return the permissions in the accessToken, because if we want to do conditional rendering we need to have access to the role assign to the user account in our aplication and for that we need to add the role to the idToken.Therefore we will need to create a rule in the Rules menu from the Auth0 dashboard. Make sure that the rule that you create using the following code snippet is enabled.

function (user, context, callback) {
const namespace = `http://localhost:3000/`;
const assignedRoles = (context.authorization || {}).roles;

let idTokenClaims = context.idToken || {};

idTokenClaims[ `${namespace}/roles` ] = assignedRoles;

context.idToken = idTokenClaims;

callback(null, user, context);
}

19. If you want to allow the users to log in to the application using their Google profile please follow the next guide.

Set up environment variables

To connect the app with Auth0, you'll need to add the settings from your Auth0 application as environment variables.

15. Copy the content of .env.example into a new file called .env.local at the root of this project, then add the missing environment variables:

    • NEXT_PUBLIC_AUTH0_DOMAIN - Can be found in the Auth0 dashboard under Applications ,select the created Application and go to settings.
    • NEXT_PUBLIC_AUTH0_CLIENT_ID - Can be found in the Auth0 dashboard under Applications ,select the created Application and go to settings.
    • NEXT_PUBLIC_AUTH0_AUDIENCE - Can be found in the Auth0 dashboard under APIs ,got to settings tab and copy the Identifier.
    • NEXT_PUBLIC_SERVER_URL - Should be set to http://localhost:5000 when testing locally (if you check the back end code of this project you will see that 5000 is the port to which the express server is currently listening to) or typically to https://myserver.com when deploying the server.
    • NEXT_PUBLIC_CLIENT_URL - Should be set to http://localhost:3000 when testing locally or typically to https://myapp.com when deploying the server.

Available Scripts

In the project directory, you can run:

npm run dev  # runs the app in the development mode

npm run build # create a production build.

npm run start # start the app in production mode.

Deploy on Vercel

You can deploy this app to the cloud with Vercel (Documentation).

Deploy Your Local Project

To deploy your local project to Vercel, push it to GitHub/GitLab/Bitbucket and import to Vercel.

Important: When you import your project on Vercel, make sure to click on Environment Variables and set them to match your .env.local file.

Contributors ✨

Fadumo Aideed

Valentina Militaru

Amelia Collins-Patel

Tom Bennet

Michael Swann