Technologies

Backend

• Node.js (Run time)

• Typescript (Language)

• Prisma ORM (Database Relational Mapping)

• Docker + PostgreSQL (Containerization of Database)

• Express (Server)

• Shared

Frontend

• Node.js (Run time)

• Typescript (Language)

• React (Framework)

• MUI (Component Library)

• React Query (State Management)

• Axios (Http Flow Management)

• Use form (Forms)

• Vite

• Shared

Shared

• Typescript (Language)

Yarn (Workspace Manager)

Structure

Backend

• index.ts (Declares express server and uses routers + cors, error handling)

• Prisma (Schema and seeding for our database)

• routes (Declare routers for experiences, users, projects, links and handles middleware validation)

• Controllers (Handle the http level interface of the request, parse any information from the body or paramaters and pass information to service function. Passes errors as needed to error handler)

• Services (Handles business logic of any api request. Interacts with our database using prisma)

• Query Args (Include relational information required by the frontend for a given api request)

• Tranformers (Transform the prisma models into a type expected by the frontend)

• Testing (Unmocked Tests)

Frontend

• Index.tsx (Entry Point for React app)

• Auth Context (Logging the user in and tracking the current user) undefined is gonna be a guest

• apis (Axios calls to backend)

• hooks (Largely Manage state between axios calls and frontend displays)

• components (Shared ui pieces)

• pages (Large single instances of compilations of components)

  • Projects

  • Experience

  • About Me (bio)

Shared

• Types

Gimmes

• frontend login + contexts

• backend cors, express setup and auth

• GetCurrentUser, ValidateInputs, Errors, NERModal, LoadingIndicator, ErrorPage, PageNotFound, TopNavBar, NERFormModal, theme, fonts,

Timeline

• Software General Info

• NER Wide General Info

• First Software Meeting - Talk about Club, Separate returning members vs new members, returning members get tech leads, new members get Launchpad Orientation (Explains what launchpad is) - Homework to do env setup based off of confluence. (ask #software_env_setup) about questions

• 1st Week

  • Dedicate only 15 mins to wrapping up env setup (after 15 minutes were gonna start).

  • Start Discussing Prisma

    • Via slides, explain what SQL Tables is, explain what prisma schema is, explain existing scripts and what they do (10)

      • Walkthrough Schema Creation for Project, User (10)

      • Have them do Experience (10 - 20 minutes)

    • Via Slides explain what SQL Inserts are, explain what prisma.creates are (10)

      • Walkthrough seeding a project, user (5 - 10) (prisma studio to confirm)

      • Have them seed an experience (5 - 10 minutes)

    • Room for questions (10 - 20 minutes) (Padding)

    • Homework that they can start after workshop is seed 3 projects and 3 experience

    • Ask people questions during the walkthrough

• 2nd Week

  • Start Discussing Express

    • What is an API

    • What is a Server

    • What is CRUD, HTTP

    • Routes, Controllers, Services Architecture (15-20)

    • Walkthrough

      • Create Project, Retrieve All Projects, Update Project, Delete Project + Transformers, Query args and Shared Types (15-20) (No File Uploads)

    • Have them do Create Experience, Retrieve all Experiences, Update Experiences, Delete Experiences + Transformers Query args and shared types (20-30) (No File Uploads)

    • Walkthrough File Uploads for projects (5 - 10)

    • have them do file uploads for experiences (5 - 10)

    • Homework, Finish anything they didnt get to do and do Get All Users and Log User In, Convert seeded functions to use service functions

• 3rd Week

  • Start Discussing Testing

    • Unit tests versus integration tests (5 mins)

    • What is jest/vitest (10 mins)

    • Walkthrough

      • Tests for Create Project, Retrieve all projects, update project, delete project (15-20) minutes

    • Have them do Create Experience Retrieve all experiences, update experiences and delete experiences (20 - 30)

    • Walkthrough Postman Test for create project (5 - 10 mins)

    • Have them postman test their create experience function (5 - 10 mins)

    • Homework, Finish anything they didnt get to and test get all users and log use in

• 4th Week

  • Start Discussing Frontend

    • Show our Designs (5 - 10 mins)

    • What is React (5 - 10 mins)

    • What is MUI (5 - 10 mins)

    • Current Structure of Frontend (5 - 10 mins)

    • Walkthrough Data Design of Project (10 - 15)

      • MUI Card, and look at MUI Card Docs take an example of a card and paste it into app.

      • Add a project as props to the card

      • Show how to link a image url to the backend file retriever that was made

      • Use Grid inside Card content to arrange the rest of the card

    • Have them try to make a component that takes in an experience and looks like the mock (20 - 30)

    • Homework Do the home page (give brief explanation on what useCurrentUser is

• 5th Week

  • Talk about React Query and Axios (10 - 15 mins)

  • Walkthrough the Get All Projects Hook and API call (5 mins)

  • Have them do get all experiences hook and API call (5 - 10 mins)

  • Walkthrough of The All Projects Page using the component made last time (10 -15 mins)

  • Have them do the all experiences page with the component they made last time (20 - 30 mins)

  • Walkthrough of the Create Project Hook and API Call and adding the Create Project Card to projects page (Just supply dummy values for now) (10 - 20 mins)

  • Homework they do the create experience hook and api call and add the create experience button (dummy values)

• 6th Week

  • React Hook Form Slides (10 -15 mins)

  • Walkthrough how to make the Project Form Modal and hook up to create project button (20 - 30)

  • Have them do the Create Experience Form Modal and hook up to create experience button (20 - 30)

  • Walkthrough the update Project hook, api, call it from the project card component that we created (5 - 10 mins)

  • Have them do the update Experience hook, api, call it from the experience section component for homework

• 7th Week Show and Tell / Office Hours

  • Walkthrough image carousel as an example of an improvement

  • walkthrough delete project as an example of an improvement

  • Actual login flow as improvement