Full Stack Web Development Full Stack Integration & Project Engineering Syllabus

Full Stack Integration & Project Engineering syllabus: all 5 chapters

Expand any chapter to see its topics and sub-topics.

1. 1

   The MERN Stack Architecture

   3 topics

   • Connecting React, Express and MongoDB
     • Client-server-database flow
     • Project folder structure
     • Separating concerns (frontend/backend)
   • Consuming APIs from React
     • Fetching data with Axios/Fetch
     • Loading and error states
     • React Query/SWR for data fetching
   • Cross-Origin and Proxy Setup
     • Configuring CORS
     • Dev server proxying
2. 2

   Authentication Flow End-to-End

   3 topics

   • User Registration and Login
     • Sign-up and login forms
     • Storing tokens securely
   • Protected Routes and Sessions
     • Persisting authentication state
     • Front-end route guards
   • Role-based UI
     • Conditional rendering by role
     • Logout and token expiry
3. 3

   Real-Time and Advanced Features

   3 topics

   • WebSockets and Real-Time Apps
     • Socket.IO basics
     • Chat and notification features
   • File Handling and Media
     • Image uploads and storage
     • Cloud storage (Cloudinary/S3)
   • Payment and Third-Party APIs
     • Integrating payment gateways
     • Consuming external REST APIs
4. 4

   Testing and Quality Assurance

   4 topics

   • Testing Fundamentals
     • Unit, integration and e2e testing
     • Test-driven development basics
   • Front-End Testing
     • Jest and React Testing Library
     • Component and snapshot tests
   • Back-End and API Testing
     • Testing routes with Supertest
     • Mocking databases
   • End-to-End Testing
     • Cypress/Playwright overview
5. 5

   Capstone Project and Best Practices

   4 topics

   • Project Planning
     • Requirement analysis and wireframing
     • Choosing the tech stack
     • Agile and version control workflow
   • Building a Full Stack Application
     • Designing the data model and API
     • Implementing the front-end UI
     • Integrating and deploying
   • Code Architecture and Patterns
     • MVC pattern
     • Clean folder structure and modularity
     • Reusable components and DRY principles
   • Performance, Security and Portfolio
     • Optimization and accessibility
     • Security checklist
     • Documentation and portfolio presentation

Full Stack Web Development Full Stack Integration & Project Engineering flashcards — 50 questions with answers

1. What three technologies make up the MERN stack, and what role does each play?

   MongoDB (NoSQL database for data storage), Express (Node.js web framework for the backend/API), React (front-end UI library), and Node.js (JavaScript runtime). Express+Node handle the server, MongoDB stores data, React renders the client.

2. In a MERN app, how does the Express server typically communicate with MongoDB?

   Through an ODM library such as Mongoose (or the native MongoDB driver), which connects to the database via a connection string (URI) and maps collections to JavaScript models/schemas.

3. What is the standard architectural flow of a request in a connected React + Express + MongoDB app?

   React sends an HTTP request -> Express route/controller handles it -> Express queries MongoDB (via Mongoose) -> data returns to Express -> Express sends JSON response -> React updates the UI.

4. Which browser APIs are commonly used in React to consume a backend REST API?

   The built-in fetch() API and third-party libraries like Axios, both of which send HTTP requests and return promises resolving to the response data.

5. Why are useEffect and a state hook commonly paired when fetching API data in a React function component?

   useEffect triggers the fetch when the component mounts (or when dependencies change), and the state hook (useState) stores the fetched data so a re-render displays it.

6. What is the Same-Origin Policy and why does it cause problems for React apps calling an API?

   It is a browser security rule that restricts a page from making requests to a different origin (protocol + domain + port). A React dev server on one port calling an API on another port is cross-origin, so the browser blocks it unless CORS allows it.

7. What does CORS stand for and what does it do?

   Cross-Origin Resource Sharing. It is a mechanism where the server sends HTTP headers (e.g., Access-Control-Allow-Origin) that tell the browser which other origins are permitted to access its resources.

8. In an Express app, how do you typically enable CORS?

   By using the cors middleware: app.use(cors()) to allow all origins, or app.use(cors({ origin: 'https://example.com' })) to whitelist specific origins.

9. What is a CORS preflight request?

   An automatic OPTIONS request the browser sends before certain cross-origin requests (e.g., with custom headers or non-simple methods) to check whether the actual request is allowed by the server.

10. How does setting a 'proxy' in a Create React App package.json help during development?

    It forwards unmatched requests from the dev server to the specified backend URL, so the frontend can call relative paths (e.g., /api/users) and avoid CORS issues during development.

11. What is the typical sequence of steps in user registration?

    Collect user input -> validate it -> check the user does not already exist -> hash the password -> store the user in the database -> optionally issue a token/session and return a success response.

12. Why must passwords be hashed before storing them, and which library is commonly used in Node.js?

    Hashing protects passwords if the database is breached, since the plaintext is never stored. bcrypt is commonly used; it applies a one-way hash with a salt.

13. What is a salt in password hashing?

    A random value added to a password before hashing so that identical passwords produce different hashes, defeating precomputed (rainbow table) attacks.

14. What does JWT stand for, and what are its three parts?

    JSON Web Token. Its three dot-separated parts are the Header, the Payload (claims), and the Signature.

15. Compare stateful sessions with JWT-based authentication.

    Sessions store state server-side (in memory/DB) and send a session ID cookie; the server must look it up each request. JWTs are stateless: the signed token carries the data so the server only verifies the signature, making it easier to scale but harder to revoke.

16. What is a protected route in a web application?

    A route/endpoint or page that requires the user to be authenticated (and sometimes authorized) before access is granted; unauthenticated users are redirected or denied.

17. How is a protected route typically implemented on an Express backend?

    With authentication middleware that runs before the route handler, checks for a valid token/session, and either calls next() to continue or returns a 401 Unauthorized response.

18. How is a protected route typically implemented on the React frontend?

    With a wrapper/guard component (e.g., a PrivateRoute) that checks auth state and renders the target component if authenticated, otherwise redirects to the login page.

19. What HTTP status codes distinguish authentication failure from authorization failure?

    401 Unauthorized means the user is not authenticated (no/invalid credentials); 403 Forbidden means the user is authenticated but not allowed to access the resource.

20. What is role-based access control (RBAC)?

    An authorization model where permissions are assigned to roles (e.g., admin, editor, user), and users are granted access based on the roles they hold rather than individual permissions.

Full Stack Web Development Full Stack Integration & Project Engineering FAQ