Home

Welcome to the ML@SJSU Website wiki!

Prerequisites

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

• Javascript, Typescript, HTML, CSS
• React.JS
• Next.JS
• Tailwind CSS
• SWR
• NextAuth
• PostgreSQL
• Zod
• Git
• Github

If you are not familiar with any these technologies, please check out the Resources section:

Installation

System Requirements:

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

To install the project, execute the following commands into your terminal:

1. Clone the repository:

git clone https://github.com/mlatsjsu/mlatsjsu-website.git

2. Install the dependencies:

cd mlatsjsu-website
npm install

3. Create .env.local file (Ask for the .env file):

If you're on windowws, run npm install touch-cli -g first.

touch .env.local

4. Add environment variables to the file

5. Run the dev server:

npm run dev

6. Make sure you have ESLint and Prettier installed in your code editor to maintain code quality.

Project Structure

app/

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

• api/: Contains the API route handler and NextAuth logic.
• (marketing): Groups the marketing pages of the website.
• (forum-with-sidebar): Groups the forum pages that will include the sidebar.
• forum: Contains the post views of the forum.

To learn more about routing in Next.JS, checkout the documentation.

components/

The components/ directory contains all the reusable components used throughout the application. The folder is structured as follows.

.
└── components/
    ├── atoms/
    │   ├── index.ts
    │   ├── btn/
    │   │   ├── component.tsx
    │   │   └── index.ts
    │   └── ...
    ├── molecules/
    │   └── ...
    └── organisms/
        └── ...  

Please read Atomic Design Methodology and React App Structure: Atomic Design. We don’t need the pages and templates folders since the Next.JS app router already provides pages, layouts, and templates.

Atoms

Use atoms to represent style and reduce markup. These elements’ PropType will extend the original elements PropType, so don’t handle too much state in or pass too many props to atoms (children and maybe a variant prop is fine). The cn utility is used to combine base utility classes with passed in classes. Any styles in the className prop will overwrite the base utility class. Use the cn utility like this.

Molecules

Use molecules to represent reusable components. Compose them with atoms and other UI elements.

Organisms

Use organisms to represent complex UI components composed of groups of molecules, atoms, UI elements, and/or other organisms. They form distinct sections of an interface.

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.

lib/

The lib/ directory contains utility functions used throughout the application.

types/

The types/ directory contains TypeScript type definitions used throughout the application.

Resources

Here are some resources:

React:

• React.JS Todo App

NextJS:

• How SSR Works
• Next.JS Learn
• NextJS Docs

Routing:

• NextJS Docs - Routing

TailwindCSS:

• TailwindCSS Design Systems
• TailwindCSS Docs

SWR:

• SWR Vercel Docs

Github:

• Reviewing Pull Requests
• Responding to Code Reviews

Pagination:

• Loading Your React Data Like This is Awesome
• SWR Vercel Docs - Pagination

Comments:

• How To Build A Full Stack Nested Comments System

API:

• NextJS Route Handlers

Need Help?

If you need help, please reach out to #chreh or #ahmadgaz on discord. We are happy to help you with any questions you may have.