Full-Stack Developer – 100+ Lab Exercises (Basic, Intermediate, Advanced)

🔰 Basic Level (30+ Exercises)

Goal: Master the foundational skills of front-end and back-end development.

HTML/CSS/JavaScript

• Create a personal portfolio using HTML and CSS.

• Build a responsive navigation bar using Flexbox.

• Develop a to-do list using vanilla JavaScript.

• Design a form and validate inputs using JS.

• Create a CSS grid-based layout for a landing page.

Git & GitHub

• Initialize a Git repository and track changes.

• Create branches and push code to GitHub.

• Use pull requests and conduct code reviews.

• Resolve merge conflicts efficiently.

• Maintain project documentation using a README.md.

Basic Node.js & Express

• Set up a simple web server using Express.

• Handle GET and POST requests.

• Create basic RESTful routes.

• Serve static HTML pages via Express.

• Read and write files using Node.js built-in modules.

Database Basics (MongoDB/MySQL)

• Install MongoDB and perform CRUD operations.

• Connect Node.js to MongoDB using Mongoose.

• Design simple schemas and seed initial data.

• Perform basic queries and update documents.

• Create a basic login form connected to a MySQL database.

🚀 Intermediate Level (40+ Exercises)

Goal: Develop dynamic full-stack applications and REST APIs.

React.js Frontend

• Build a React app with functional components.

• Use useState and useEffect hooks.

• Implement client-side routing using React Router.

• Connect the frontend to a backend API.

• Create forms and manage input state using hooks.

Express API Development

• Create a CRUD API using Express and MongoDB.

• Add middleware for error handling and logging.

• Implement JWT-based authentication.

• Use .env files to manage environment variables.

• Protect sensitive routes using authentication middleware.

MongoDB/Mongoose Advanced

• Define complex schemas with validation and default values.

• Use populate() for relational document handling.

• Add indexes to optimize database queries.

• Use aggregation pipelines for reporting.

• Handle file uploads using multer and store metadata in DB.

API Testing & Documentation

• Test APIs using Postman collections.

• Document REST APIs using Swagger UI.

• Write unit tests using Mocha and Chai.

• Implement API versioning strategies.

• Automate API tests using Postman scripts.

🧠 Advanced Level (40+ Exercises)

Goal: Build, deploy, and scale production-grade full-stack applications.

Next.js & Advanced React

• Build server-side rendered (SSR) apps using Next.js.

• Use getStaticProps and getServerSideProps for data fetching.

• Implement dynamic routes and custom API endpoints.

• Integrate third-party APIs like Stripe and Google Maps.

• Add internationalization (i18n) and locale support.

Advanced Node.js and Microservices

• Create modular and scalable Node.js services.

• Set up a microservices architecture using Docker.

• Use RabbitMQ or Kafka for asynchronous messaging.

• Implement rate-limiting and throttling.

• Add Redis caching for performance boosts.

DevOps & Deployment

• Dockerize full-stack applications.

• Deploy apps on Heroku, Vercel, or AWS.

• Set up CI/CD with GitHub Actions or Jenkins.

• Configure NGINX as a reverse proxy server.

• Automate deployment scripts using shell scripting.

Security & Optimization

• Implement OAuth login with Google or GitHub.

• Sanitize inputs to prevent XSS and SQL injection.

• Use helmet and express-rate-limit for Express security.

• Optimize React apps using code-splitting and lazy loading.

• Compress images and static assets for faster load times.

Project Ideas

• E-commerce app with product catalog and payment gateway.

• Social media platform with real-time chat and user auth.

• Job portal with resume upload and admin dashboard.

• Online code editor with live preview support.

• Multi-tenant SaaS dashboard with role-based analytics.