Web Dev Bootcamp
by EPITECH
Build a full-stack Todo App
Pre-requisites :
- VS Code Editor
- Node.js
- npm/yarn
- Vue/React Developer Tools (Chrome & VS Code)
NB: Videos of any sort are not allowed during this Bootcamp.
End Goal: Build a full-stack Todo App.
Day 01 : Introduction to Web Development
Quick Introduction : 10-minute crash course on HTML, CSS, and JavaScript.
Task 01: Build a simple personal webpage (e.g., with a header,
paragraph, and an image) using only HTML and CSS.
Task 02: Add basic styling (colors, fonts) to the page using CSS.
Task 03: Add interactivity (change text color when clicking a button)
using basic JavaScript.
Task 04: Create a small app with Javascript that dynamically adds items
to a list (a shopping cart system)
Task 05: Style the shopping cart with CSS.
Task 06 : Persist data changes in the web browser so that when your
page is refreshed, the data is not reset.
Day 02 : Introduction to React w Typescript and TailwindCSS
Quick Introduction : 15-minute explanation of components, TSX, props and state.
Task 01: Create the to-do list app components and style them using
TailwindCSS.
Task 02: Compose your to-list app main page using the created
components.
Task 03: Hoist your state. Make use of stores to store your to-do
list app state (Zustand is an excellent choice)
Task 04: Create a Login and SignUp form for your web application by
composing and reusing form components.
Task 05 : Implement user data validation rules for email and
password.
Day 03 : APIs and Routing
Morning:
Quick Introduction : 15-minute overview of fetch/axios, API structure, JSON and
handling API responses.
Task 01: Fetch data from a public API and display it in a list (e.g.
GitHub users, RickandMorty, imDB).
Task 02: Handle loading and error states gracefully.
Task 03: Add a router to navigate between a login page, a sign up
page, a home page and a detail page for a specific task.
Afternoon:
Quick Introduction: 10-minute explanation on how to create APIs.
Task 04: Create a back-end app with ExpressJS to serve to-dos.
Task 05: Connect your to-do list app to your Express server and
consume its APIs.
Task 06: Add endpoints to your server app for authentication.
Task 07 :
Day 04 : Introducing Persistent Storage and Wrap-Up
Morning:
Quick Introduction : 15-minute overview of MongoDB and project expectations.
Task 01 : Add MongoDB to your back-end app.
Task 02 : Save user to MongoDB
Task 03 : Save todos for logged-in user to MongoDB
Afternoon:
Wrap-up: Let each group present their project, reflect on what they learned and a
final Q&A.
Key Tips :
● After each intro, give them links to official docs.
● During the bootcamp, write down key areas where students need help in the
future to be able to improve their skills.
● Pair programming : Have them work in pairs to tackle tasks.
● Challenge/Bonus Tasks : Usage of React Hooks.
Resources :
- Doc React
- Javascript
- HTML/CSS
