FOCUS Youth Organization's User Portal

This is a user portal created for FOCUS Youth Organization, a Canadian charity that I founded back in grade 9. The portal is used to validate FOCUS Youth active members and allow executives, volunteers, and tutors, to log their volunteer hours. The user portal is a full-stack (MERN) app; using Vercel to host the React client, and Heroku for the NodeJS server.

Full-Stack (MERN) App Features:

Login to your unique account to view, log, and update your volunteer hours.
Authencated user id allows only admins to view protected pages.
Automatic sign-out after 1 hour using JSONWebTokens for security.
Admin role allows users to edit/add/delete users.
Approve volunteer hours of other volunteers.
Sign-out to switch users or end current session.
Sign-up page for any new volunteer to join the user portal.

About the user portal: The user portal uses MongoDB atlas to store user information. One collection stores user data (email, name, password, role, etc.) while another collection stores all the volunteer hour date (description, duration, approvel, etc.)

The backend NodeJS server is hosted on Heroku, and the frontend React app is hosted on Vercel and can be accessed at portal.focusyouth.ca Express is used as the routing and middleware for GET and POST methods from the React client to the NodeJS server.

User authentication is handled using JSONWebTokens sent from the server-side to the client-side webpage.

View on GitHub: