Deep Dive Into Modern Web Development

Full Stack Open 2023 - 2024

Learn React, Redux, Node.js, MongoDB one go! This course will introduce you to modern JavaScript-based web development. The main focus is on building single page applications with ReactJS that use REST APIs built with Node.js.

Part 0 - Fundamentals of Web apps

• General Info
• Fundamentals of Web apps

Projects:

• Sequence Diagrams: Illustrative diagrams showcasing the sequence of events during network interactions for both single-page and traditional applications

Part 1 - Introduction to React

• Introduction to React
• JavaScript
• Component State, event handlers
• A more complex state, debugging React apps

Projects:

• Anecdotes: A page presenting users with random anecdotes that can be rated.
• Unicafe: A feedback and statistics page demonstrating state management via React hooks.

Part 2 - Communicating with server

• Rendering a collection, modules
• Forms
• Getting data from server
• Altering data in server
• Adding style to React apps

Projects:

• Countries - A page fetching country and weather data from 3rd party APIs based on user searches.
• Phonebook Front-end: A front end for a phone directory, enabling viewing, filtering, addition, deletion, or modification of entries.

Part 3 - Programming a server with NodeJS and Express

• Node.js and Express
• Deploying app to internet
• Saving data to MongoDB
• Validation and ESLint

Projects:

• Phonebook Back-end: A RESTful back end in Express for the phone directory front end from the preceding part. Utilizes Mongoose and MongoDB.

Part 4 - Testing Express servers, user administration

• Structure of backend application, introduction to testing
• Testing and backend
• User administration
• Token administration

Projects:

• Bloglist Back-end: A RESTful back end in Express for managing blog post data. Certain endpoints are restricted to authenticated users. Unit and integration tests conducted using Jest and SuperTest.

Part 5 - Testing React apps

• Login in frontend
• props.children and proptypes
• Testing React apps
• End to end testing

Projects:

• Blog List Front-end: A React front end for the blog management back end from the previous part. Users can add or like blog posts. React component unit testing done with Jest and React Testing Library. Full stack end-to-end testing carried out with Cypress.

Part 6 - State management with Redux

• Flux-architecture and Redux
• Many reducers
• Communicating with server in a redux application
• Connect

Projects:

• Query Anecdotes: A revisiting of the anecdotes app from part 1 with Redux for state management. Uses reducers for notifications, filtering data, and initializing/adding/voting for anecodtes. Uses Redux Thunk middleware for for asynchronous actions.

Part 7 - React router, custom hooks, styling app with CSS and webpack

• React-router
• Custom hooks
• More about styles
• Webpack
• Class components, Miscellaneous
• Exercises - extending the bloglist

Projects:

• Extended Blog List Front-end: / Extended Blog List Back End: An expanded full stack application based on the blog app from parts 4 and 5. Facilitates sharing blog posts with friends who can like or comment on them. Redux employed for state management, React Router for routing. Enhanced styling achieved with Material-UI. The Express-based RESTful back end stores data in MongoDB. User authentication is done via JSON web tokens, with only authenticated users allowed to comment on or like posts.

Course Certificate

Full Stack Certificate - Parts 0-7