Launchpad Web Dev

Owned by Peyton McKee
Last updated: Jul 04, 2024
4 min read

 

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