Our client is the Vanderbilt Student Government, but our project is built to be used by all current and incoming Vanderbilt students. We are building a crowdsourced course registration helper that will allow students to review courses and provide suggestions for new students. It would allow students to construct their semester schedule and plan future semesters in one unified dashboard, taking into account their majors, minors, and personal interests.
Our project scope will be a course review system that allows students to rate the courses based on a variety of metrics, such as difficulty. Ratings will be completed through a form. The data will be stored in a database and used to help generate recommended schedules that fit students’ preferences. We will also incorporate a log-in system to validate Vanderbilt students. Finally, students will be able to share their schedules with peers. Additional features will also be considered such as syncing schedules with peers and schedule previews for students who are looking to add a major or minor, but only if time permits.
This directory contains all the pages for our frontend and API routes for our backend. The pages are automatically generated by Next.js based on the file structure. For example, the file pages/index.tsx is rendered at the root of our application, while the file pages/profile.tsx is rendered at /profile.
This directory contains all the components for our frontend. The components are organized into subdirectories based on their function. For example, the components/Reviews directory contains all the components for viewing, creating, and deleting reviews.
The folders that are named the same as pages in the pages directory contain the code for the page at index.tsx. For example, the components/Profile/index.tsx contains the code for the page at /profile.
The layout components are used to wrap the pages in the pages directory. They are used to provide a consistent layout across all pages.
This directory contains all the custom React hooks for our frontend. All state and effects are modularized into custom hooks to keep our components clean and simple. This also allows us to change the implementation of our state effects, and API routes without having to change our components.
Hooks are organized into subdirectories based on their function. For example, the hooks/auth directory contains all the hooks for handling authentication, while the hooks/queries directory contains all the hooks for fetching data from our database.
This directory contains all the files for our Firebase configuration. It holds the connection config and the converters to give types to data returned from Firestore.
This directory contains all the services for our backend. This includes the creation and deletion of reviews, comments, professors, and courses.
The services also include the fetching of data from external APIs, such as the Vanderbilt Course Catalog API.
This directory contains all the TypeScript types for our frontend and backend. The types are organized into subdirectories based on their function.
This directory contains all the theme files for our frontend. The theme files are used to customize the Chakra UI components.
This directory contains all the files for our Algolia search indices.
This directory contains all the constants for our frontend and backend.
This directory contains all the static files for our frontend. The files in this directory are served at the root of our application.
We use React to build our frontend. React is a JavaScript library for building modular, component-based user interfaces.
We use Chakra UI components and theming to build our frontend. Chakra UI is a simple, modular and accessible component library that gives us the building blocks we need to build our React applications.
We use Next.js routing to handle routing and page generation. Next.js is a React framework that provides us with a hybrid static & server rendering, TypeScript support, smart bundling, route pre-fetching, and more.
We use Next.js API routes to handle our API routes. Next.js API routes provide us with a simple solution for building our API endpoints.
We use Firebase Firestore to store our data. Firebase Firestore is a NoSQL cloud database that allows us to store and sync data between our users in realtime.
We use Algolia Search to provide our search functionality. Algolia Search is a search-as-a-service platform that provides us with a simple solution for indexing and querying our Firestore database.
We use Firebase Authentication to handle our authentication. Firebase Authentication is a simple solution for authenticating our with several OAuth providers, as well as email/password based account management.
We use Vercel to host our frontend and backend. Vercel is a cloud platform for static sites and Serverless Functions that fits perfectly with our Next.js frontend and backend. It is integrated with our GitHub repository, so that any changes pushed to the main branch will be automatically deployed to our production environment.
This is a Next.js project bootstrapped with [create-next-app](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
First, run the development server:
yarn dev
Open http://localhost:3000 with your browser to see the result.yarn