Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/mitulagr2/fullstackopen
Learning React, Redux, Node.js, MongoDB, GraphQL, and TypeScript as a part of Full Stack Open 2022.
https://github.com/mitulagr2/fullstackopen
fullstackopen2022 graphql mongodb nodejs reactjs redux typescript
Last synced: 9 days ago
JSON representation
Learning React, Redux, Node.js, MongoDB, GraphQL, and TypeScript as a part of Full Stack Open 2022.
- Host: GitHub
- URL: https://github.com/mitulagr2/fullstackopen
- Owner: mitulagr2
- Created: 2022-03-27T12:56:14.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2023-07-09T11:04:10.000Z (over 1 year ago)
- Last Synced: 2024-11-16T23:18:34.078Z (2 months ago)
- Topics: fullstackopen2022, graphql, mongodb, nodejs, reactjs, redux, typescript
- Language: JavaScript
- Homepage: https://fullstackopen-mitulagr2.netlify.app
- Size: 1.63 MB
- Stars: 0
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Full Stack Open 2022 🔥
This is my course submission repository for [The Full Stack Open 2022](https://fullstackopen.com/en/) by The University of Helsinki!
Table of contents
=================
* [💡 What I Learnt](#-what-i-learnt)
* [Part 1 - Introduction to React](#part-1---introduction-to-react)
* [Part 2 - Communicating with server](#part-2---communicating-with-server)
* [Part 3 - Programming a server with NodeJS and Express](#part-3---programming-a-server-with-nodejs-and-express)
* [Part 4 - Testing Express servers, user administration](#part-4---testing-express-servers-user-administration)
* [Part 5 - Testing React apps](#part-5---testing-react-apps)
* [Part 6 - State management with Redux](#part-6---state-management-with-redux)
* [Part 7 - React router, custom hooks, styling app with CSS and webpack](#part-7---react-router-custom-hooks-styling-app-with-css-and-webpack)
* [Part 8 - GraphQL](#part-8---graphql)
* [Part 9 - TypeScript](#part-9---typescript)
* [💌 Other Full Stack Open Repositories](#-other-full-stack-open-repositories)
# 💡 What I Learnt
## Part 1 - Introduction to React
- Javascript ES6.
- Component architecture.
- Helper functions.
- Page re-rendering.
- Stateful components.
- React hooks.
- Event handling.
- Debugging React applications and [React devtools](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en).
## Part 2 - Communicating with server
- Rendering a collection.
- Using HTML forms.
- Controlled components.
- Handling data stored in a remote server.
- JavaScript Promises.
- REST API.
- Single responsibility principle and modularizing backend communication.
- Adding CSS to React.
## Part 3 - Programming a server with NodeJS and Express
- HTTP verbs and resource oriented architecture.
- [curl](https://curl.se/) and [Postman](https://www.postman.com/).
- HTTP safety and idempotence [standards](https://www.rfc-editor.org/rfc/rfc9110.html#name-common-method-properties).
- Using middlewares.
- Same origin policy and CORS.
- Deploying to Heroku.
- Debugging Node applications and Chrome dev tools.
- Validating received data using mongoose [custom validators](https://mongoosejs.com/docs/validation.html#custom-validators).
- Configuring ESLint.
## Part 4 - Testing Express servers, user administration
- Unit and Integration tests.
- User authentication and authorization.
- Node.js project directory structure best practices.
- [jest](https://jestjs.io/).
- [supertest](https://github.com/visionmedia/supertest) to test backend API.
- Using async/await and [express-async-errors](https://github.com/davidbanham/express-async-errors) to refactor tests.
- Introduction to database modelling.
- Token based authentication and it's limitations.
## Part 5 - Testing React apps
- Testing the React code.
- Component references with [useRef](https://reactjs.org/docs/hooks-reference.html#useref).
- Integrating [prop-types](https://github.com/facebook/prop-types).
- Rendering test components using [react-testing-library](https://github.com/testing-library/react-testing-library).
- Debugging tests.
- End to End testing using [cypress](https://www.cypress.io/).
- Bypassing the UI.
## Part 6 - State management with Redux
- Introduction to [Flux](https://facebook.github.io/flux/docs/in-depth-overview/)-architecture.
- Moving app state to the [Redux](https://redux.js.org/) store.
- Pure functions and immutability.
- Introduction to test driven development.
- [Action creators](https://redux.js.org/advanced/async-actions#synchronous-action-creators) and forwarding Redux-Store.
- Complex state and combined reducers.
- Trimming redux configuration using [Redux Toolkit](https://redux-toolkit.js.org/).
- [Redux DevTools](https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd).
- Asynchronous actions and [Redux Thunk](https://github.com/reduxjs/redux-thunk).
- Using react-redux's connect-function for older projects that do not use the hook-api ([Legacy code maintainance](https://user-images.githubusercontent.com/69587385/195093019-80528cbf-2088-46a9-8ef9-6cb9e85bb9a8.jpg) ⚔️).
- Presentational, container, and higher order components. A brief breakdown of design choices.
## Part 7 - React router, custom hooks, styling app with CSS and webpack
- React router and application navigation structure.
- Custom hooks.
- React UI libraries comparision and the [styled components](https://www.styled-components.com/) library.
- Bundling with webpack.
- Babel loader to transpile JSX into regular JavaScript.
- Loading CSS with [css-loader](https://webpack.js.org/loaders/css-loader/) and injecting a merged style element with [style-loader](https://webpack.js.org/loaders/style-loader/).
- Incorporating hot reload with [webpack-dev-server](https://webpack.js.org/guides/development/#using-webpack-dev-server).
- Generating [source-map](https://webpack.js.org/configuration/devtool/) to trace errors during execution and enable Chrome debugger.
- Minification using [UglifyJS](http://lisperator.net/uglifyjs/).
- Adding polyfill for browser compatibility.
- Class components.
- An overview of React-Node app security, Server-side rendering and Universal code, PWAs, Microservice architecture, and Serverless computing.
## Part 8 - GraphQL
- GraphQL Schemas and Queries.
- [Apollo server](https://www.apollographql.com/docs/apollo-server/) and [Apollo studio explorer](https://www.apollographql.com/docs/studio/explorer/explorer/).
- Mutations and their resolvers.
- Error handling and GraphQL validation.
- Enums and Query filtering.
- Named queries and parameters.
- Handling cache.
- Management of application state by [Apollo client](https://www.apollographql.com/docs/react/get-started/).
- Fragments.
- Subscriptions.
## Part 9 - TypeScript
- Key features - type annotations, structural typing, type inference - and why one should use TypeScript.
- Initializing an express app using tsc.
- Union types and interfaces.
- Utility types.
- Proofing received data and [type guards](https://www.typescriptlang.org/docs/handbook/2/narrowing.html#using-type-predicates).
- React components with TypeScript.
- Exhaustive type checking.
Annnnnnd, a lot more!!
# 💌 Other Full Stack Open Repositories
\- Full Stack Open 2022 - [mitulagr2/phonebook-fullstackopen](https://github.com/mitulagr2/phonebook-fullstackopen)
\- Full Stack Open React Native 2021 - [mitulagr2/fso-rate-repository-app](https://github.com/mitulagr2/fso-rate-repository-app)
\- Full Stack Open CI/CD - [mitulagr2/full-stack-open-pokedex](https://github.com/mitulagr2/full-stack-open-pokedex)
\- Full Stack Open Containers - [mitulagr2/fso-containers-and-orchestration](https://github.com/mitulagr2/fso-containers-and-orchestration)
# Thank you very much!
Open to any suggestions on how to make this better! Much appreciated!