This repository contains my solutions and complete projects for Parts 0 through 7 of the University of Helsinki's Full Stack Open curriculum. It demonstrates modern full-stack web development, automated testing, state management, and software engineering best practices.
I have successfully completed all core Parts (0 to 7). Link to Certificate
Here are some of the key projects deployed and running online:
| Project | Description | Live Demo |
|---|---|---|
| Bloglist | A full-stack blog platform with user authentication, comments, and likes | Live Demo |
| Phonebook | A full-stack contact management app with persistent storage | Live Demo |
📌 Demo Credentials:
Username:test
Password:pass
Full Stack Open is a comprehensive and rigorous curriculum focused on modern JavaScript full-stack development using a modern stack: React, Node.js, Express, and MongoDB.
Key topics covered:
- ⚛️ React fundamentals, custom hooks, and component architecture
- 🌐 State management with Zustand, Redux Toolkit, React Query (TanStack Query), and Context API
- 🧭 Client-side routing with React Router
- 🔧 RESTful API design & development using Node.js and Express
- 🗄️ Database management with MongoDB & Mongoose ODM
- 🔐 User authentication & authorization using JWT and Bcrypt
- 🧪 Comprehensive testing: Unit & Integration testing (Vitest, React Testing Library) and E2E testing (Playwright)
- 🎨 UI Styling (MaterialUI, React Bootstrap, Styled-Components)
- 🚀 Full-stack deployment (Render)
- Frontend: React 18, React Router, Zustand, React Query, Axios, MaterialUI, Vite
- Backend: Node.js, Express, MongoDB, Mongoose, JSON Web Tokens (JWT), Bcrypt
- Testing: Vitest, React Testing Library, Playwright
- Deployment & Tools: Render, Git, ESLint
This repository is organized by course parts:
| Part | Topics | Projects |
|---|---|---|
| Part 0 | Fundamentals of Web Apps | Diagrams & exercises |
| Part 1 | Introduction to React | Course info, Unicafe, Anecdotes |
| Part 2 | Communicating with Server | Phonebook, Countries |
| Part 3 | Programming a Server with Node.js | Phonebook backend |
| Part 4 | Testing Express Servers | Bloglist backend |
| Part 5 | Testing React Apps | Bloglist frontend + E2E tests |
| Part 6 | State Management | Unicafe, Anecdotes (Zustand & React Query) |
| Part 7 | Advanced State Management & Routing | Routed anecdotes, Bloglist full-stack |
- 🌐 Full-stack development: Building complete applications from database to UI
- 🔄 State management: Zustand, React Query, Context API
- 🧪 Testing: Unit, integration, and end-to-end testing (Playwright)
- 🧹 Code quality: ESLint, Prettier, modular code structure
- 🎨 UI/UX: Responsive design, MaterialUI, error boundaries
- 🏗️ Architecture: Separation of concerns, custom hooks, service modules
- 📦 Production deployment: Deploying full-stack apps to Render
Each part is self-contained. To run any project:
cd partX/project-name
npm install
npm run dev(Note: Environment variables for database connections, such as MONGODB_URI or SECRET, may be required for backend projects. Refer to individual project README files for specifics).
This repository is for educational purposes. All solutions are my own work.
"I promise to keep the console open all the time during this course, and for the rest of my life when I'm doing web development."
— Full Stack Open