This project is based off the template used for all EPICS CS projects. The core technologies used are:
- Next.js: A full stack web development framework
- Prisma: A database ORM used to connect Next.js to a database
- PostgreSQL: An open source SQL database
- The first thing to do is edit this file. The title and description of the project should reflect your project, the organization it is for, and the target functionality.
- Setup your development environment to ensure you have everything installed to run the project (see the prerequisites section).
- Run your project (see the [running the project section].(#running-your-project))
- Start coding!
In order to run this project, a few technologies are required:
If you have these installed already, you can skip to running this project.
Node.js is what allows us to write all our applications in JavaScript. Usually, JavaScript is run only in a web browser. By building on top of Node.js, we can write code that is executed on the server, simpler to write, and/or more secure.
Docker is a container framework. Containers allow us to standardize the environment that software runs on. In the case of this project, we use Docker to run the PostgreSQL database. By running the database in a container, the database of every person on the team will be configured exactly the same way. Since databases are quite complex applications, this greatly reduces the likelihood of experiencing issues with the database.
On windows, you can install node from the Node.js downloads page. Make sure you install the LTS (long-term support) version! Download and run the installer.
Once the installation is finished (and you have restarted you computer if prompted), you can continue to installing Docker.
It is recommended to use node version manager (nvm) to install and run node on Mac/Linux. You can install is by using the command found here in your terminal application. Alternatively, you can follow the installation instructions in the windows instructions.
Once you have installed node version manager installed, run the following commands in your terminal:
nvm install --lts # Install latest version of Node.js
nvm install-latest-npm # Update npm to latest versionThese commands do the following:
- Install the long-term support (LTS) version of Node. The LTS version is the version of Node that will receive security updates the longest.
- Update the node package manager (npm) to the latest version.
This completes your installation of Node!
Docker Desktop is the recommended way to install Docker. If you choose to install Docker another way, there is no guarantee that you will have everything installed correctly. To install docker desktop download and run the installer from Docker's Getting Started Page.
pnpm is an improved version of the Node Package Manager (npm). Though not required, it is highly recommended that you install it. You can install it using the following command in your terminal/powershell after node has been installed
npm install -g pnpmIf you choose to install pnpm, then you can substitute all usage of 'npm' with 'pnpm' and all usage of 'npx' with 'pnpx'. Additionally, you can create an alias in your .bashrc (Linux) or .zshrc (Mac) files. This will mean that when you type in npm or npx, pnpm and pnpx will be substituted. Use the following commands to add the aliases to the corresponding file:
# Linux
echo 'alias npm="pnpm"' >> .bashrc
# Mac
echo 'alias npm="pnpm"' >> .zshrcFirst, install the project dependencies:
npm installThen, you must run the docker compose command:
docker compose up
# or, if you want to keep using the terminal in which you executed the command
docker compose up -dThen, you must run the prisma push command:
npx prisma db pushNow, in order for logging in to work, you must seed your account information into the local database, AND add your credentials to Auth0 Edit the seed.js file to match your credentials, and then run this command:
npx prisma db seedIf you dont already have your .env files setup, make sure to do this as well. you may have to restart your docker containers for new env file changes to take effect:
docker compose down
docker compose up
# or
docker compose up -dFinally, run this:
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun devMake sure you have created a user in the Auth0 application dashboard as well! After one user has been created through the Auth0 dashboard, additional users can be created using the same method, or directly through our website by navigating to the admin page on the employee dashboard, and clicking the 'Register' button.
Open http://localhost:3000 with your browser to see the result.
You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.
This project uses next/font to automatically optimize and load Inter, a custom Google Font.
Our codebase uses Cypress with Gherkin syntax to write and run end to end tests. Running E2E tests is simple. First, make sure you have the cypress.env.json and the .env.test files in your root project directory with the proper variables (these files should be provided to you).
In order to run the E2E testing suite, you can run the following command:
npm run test:e2eThis will run a series of commands:
- Creates a new database for the testing enviornment
- Runs the website locally
- Opens the Cypress testing panel
If you see patch notes, simply click next.
When prompted, you can then choose the End to End Testing option. From here, choose Chrome and click the launch button.
After you are in the E2E testing menu, you can choose a .feature file to test the specific feature. More information about how to write tests properly can be found in a seperate README file located under the cypress directory in the project.
Once you are finished testing, you can simply exit out of all Cypress related windows. Once all Cypress windows are closed, the cleanup command will automatically execute. This command will:
- Stop running the website
- Kill and destroy the testing database
- Cleanup all docker containers associated with testing
IMPORTANT: DO NOT RUN E2E TESTS USING ANY OTHER COMMAND OTHER THAN THE ONE GIVEN HERE (SUCH AS npx cypress open OR npx cypress test), UNLESS YOU KNOW EXACTLY WHAT YOU ARE DOING.
Websites are built using HTML, CSS, and JavaScript. HTML, or Hypertext Markup Language, is a markup language for the web that defines the structure of web pages1. Examples of these structures include paragraphs, headings, headers, footers, lists, navigation, and images. Each one of these components is defined in an HTML file for every website you visit.
To learn more about Next.js, take a look at the following resources:
- Next.js Documentation - learn about Next.js features and API.
- Learn Next.js - an interactive Next.js tutorial.
- Official Next.js Examples
- Official Next.js with Prisma Example
You can check out the Next.js GitHub repository - your feedback and contributions are welcome!
To learn more about Prisma, take a look at the following resources:
Current Situation and Proposed Solution
Currently, the Wellness Center relies on a manual system involving phone calls and Google Sheets to coordinate rides and track volunteer hours. The proposed web application will significantly improve this process by:
- Automating ride selection for volunteers
- Reducing administrative workload
- Providing real-time tracking of rides and volunteer hours
- Centralizing all data in an easily accessible database
Key Features and Functionality
- Landing Page
- Implements a login button that redirects users to login to their account Login Page
- After filling out user credentials, should validate that they match in an account in the system which will be handled by Auth0
- After logging in, should redirect users to the appropriate dashboard given their account permissions.
- Registration Page
- Include a registration form that is used for creating user volunteer accounts Employee Dashboard
- Display relevant information that admins would like to see at a glance such as recently booked or completed rides
- Employee Rides Page
- Functionality to add in available rides for reservation that will be added to the database
- Include table display that filters rides based on the ride’s status (available, reserved, and completed)
- Employee Volunteers Page
- Functionality to register volunteer accounts into the system
- Table Display that shows the status of volunteers such as if they are available to reserve a ride or occupied with a ride
- Employee Clients Page
- Functionality to register clients that regularly book rides with the organization
- Table display that shows the clients that are registered with the organization
- Employee Admin Page
- Implements button that redirects user to the registration page
- Volunteer Dashboard
- Display rides that users may have reserved. If no rides are reserved, indicate that the user has no ride reserved.
- Volunteer Rides Page
- Table display that shows all of the available rides that can be reserved by the volunteers (Includes functionality to also cancel rides that the user may have reserved)
- Volunteer Hours Page
- Table display that includes the rides completed by the volunteer and the hours volunteered
- Volunteer Settings Page
- Functionality to allow users to change any settings deemed necessary such as how often users may want to be notified about new rides being added such as daily or immediately.
- Update password / information functionality
Currently the partner uses Salesforce to store information about WCOA Members. They mentioned that there is currently no need to migrate that information over but maybe required in the future.