Home

Welcome to the official SJSU Course Scheduler Front-End wiki!

Prerequisites

Before jumping into the codebase, you should have experience with the following:

• Javascript, HTML, CSS
• React.JS
• Typescript
• Next.JS
• TailwindCSS
• Git
• Github

If you are not familiar with these technologies, please check out the following videos:

1. Javascript Tetris Game
2. React.JS Todo App
3. Next.JS Learn
4. How SSR Works
5. TailwindCSS Design Systems
6. Reviewing Pull Requests
7. Responding to Code Reviews

For additional resources, please check out the Additional Resources section.

Getting Started

Installation

System Requirements:

• Node.js 18.17 or later.
• macOS, Windows (including WSL), and Linux are supported.

To install the project, follow these steps:

1. Clone the repository:

git clone https://github.com/SJSUCSClub/course-scheduling-client

2. Install the dependencies:

npm install

3. Start the development server:

npm run dev

Setting up the Environment

Create a .env.local file in the root directory and add the following environment variables:

...

Make sure you have ESLint and Prettier installed in your code editor to maintain code quality. Any internal imports should be absolute imports from the @/ directory. The .vscode directory contains the recommended settings for VSCode. If you are using a different code editor, please configure it to match the settings in .vscode/settings.json.

Project Structure

The project is structured as follows:

.
├── app/
│   ├── auth
│   ├── mock-api
│   ├── global.css
│   └── ...
├── components
├── assets
├── hooks/
│   ├── use-paginated-items.ts
│   └── use-wrapped-request.ts
├── utils/
│   ├── fake-fetch.ts
│   ├── get-customizable-components.tsx
│   ├── get-evaluation.ts
│   ├── get-paginated-items.ts
│   └── ...
├── types/
│   ├── api
│   ├── database.ts
│   └── general.ts
└── ...

app/

The Next.JS application is located in the app/ directory. This directory contains the following subdirectories:

• auth/: Contains NextAuth.js authentication logic.
• mock-api/: Contains mock API endpoints for development. Learn how to create a mock API on the Tutorials page.
• global.css: Contains global CSS styles and color variables.

components/

The components/ directory contains all the reusable components used throughout the application. Each component should be a self-contained unit that can be reused in different parts of the application. Organize components by their functionality. Any component that is used in multiple places should be placed in the components/ directory. If a component is only used in a single place, it should be placed in the same directory as the page that uses it.

assets/

The assets/ directory contains all the static assets used in the application, such as images, fonts, and icons.

hooks/

The hooks/ directory contains custom hooks used throughout the application. The following hooks are currently available for use:

• use-paginated-items.ts: A custom hook that fetches paginated items from the API. The hook takes initial data and a fetch function as arguments. The initial data is used as initial state when the data is first fetched from the Next.js server.
• use-wrapped-request.ts: A custom hook that wraps the fetch function with error handling and loading states. The hook returns the data, error, and loading states.

utils/

The utils/ directory contains utility functions used throughout the application. The following utility functions are currently available for use:

• fake-fetch.ts: A fake fetch function that simulates a network request. This function is used for testing purposes.
• get-customizable-components.tsx: If you want to create a component with overridable container props, this utility allows you to encapsulate custom props and container props seperately. It's not required to use this utility, but it can be helpful for creating more customizable components.
• get-evaluation.ts: A function that assesses input to render good, ok, or bad color indicators based on its value.

types/

The types/ directory contains TypeScript type definitions used throughout the application. The following type definitions are currently available for use:

• api/: Contains type definitions for API responses. File structure should mirror the app/mock-api/ directory. Each route can export a type definition for the RouteResponse, RouteParams, and RouteBody. Prefer to build as much of a type using the database.ts or general.ts types as possible.
• database.ts: Contains type definitions for the database schema. Each table should have a corresponding type definition. Any exports in database.ts should only be used in the types/api/ types.
• general.ts: A file for shared type definitions reused across the application, meant for general types not specific to any module.

Important Info

Please read all of these pages upon joining the team.

...

Additional Resources

Here are some additional resources:

• React.JS Docs
• Next.JS App Router Docs
• TailwindCSS Docs

Need Help?

If you need help, please reach out to the project maintainers on discord. We are happy to help you with any questions you may have.