...
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