Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/z1skgr/fullopenstack2023

Modern JavaScript-based web development. Building single page applications with ReactJS that use REST APIs built with Node.js.
https://github.com/z1skgr/fullopenstack2023

apollo-server axios-react express flux-architecture full-stack full-stack-open graphql mongodb mongoose nodejs nodemon proxy react-query react-router reactjs redux-toolkit rest-api rest-client typescript

Last synced: 2 months ago
JSON representation

Modern JavaScript-based web development. Building single page applications with ReactJS that use REST APIs built with Node.js.

Host: GitHub
URL: https://github.com/z1skgr/fullopenstack2023
Owner: z1skgr
License: gpl-3.0
Created: 2023-02-09T16:08:15.000Z (almost 2 years ago)
Default Branch: main
Last Pushed: 2024-10-21T11:48:19.000Z (3 months ago)
Last Synced: 2024-10-21T16:49:41.941Z (3 months ago)
Topics: apollo-server, axios-react, express, flux-architecture, full-stack, full-stack-open, graphql, mongodb, mongoose, nodejs, nodemon, proxy, react-query, react-router, reactjs, redux-toolkit, rest-api, rest-client, typescript
Language: JavaScript
Homepage: https://fullstackopen.com/en/
Size: 2.74 MB
Stars: 2
Watchers: 1
Forks: 1
Open Issues: 3
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

README

        # [FullOpenStack2023](https://fullstackopen.com/en/)

Courses developed for Web Development from Helsinki University focusing on building single page applications

  

    Full Stack Open 2023

  

  

    Part 0
Fundamentals of Web apps

    Part 1
Introduction to React

    Part 2
Communicating with server

    Part 3
Programming a server with NodeJS and Express

  

  

    Part 4
Testing Express servers, user administration

    Part 5
Testing React apps

    Part 6
Advanced state management

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

  

  

    Part 8
GraphQL

    Part 9
TypeScript

  

Learn 

1. React 

2. Redux 

3. Node.js 

4. MongoDB 

5. GraphQL

6. TypeScript

over several interactive courses and examples

## Table of Contents

* [Funtamentals of WebApps](#funtamentals)

* [Introduction to React](#introduction-to-react)

* [Communicating with server](#communication-with-react)

* [Programming a server with Node.js](#programming-a-server-with-node)

* [Testing server User administration](#testing-server-user-administration)

* [Testing React App](#testing-react-app)

* [Advanced state management](#advanced-state-management)

* [React router](#react-rooter)

* [GraphQL](#graphql)

* [Typescript](#typescript)

## [Funtamentals](https://fullstackopen.com/en/part0)

Basics of web development [here](https://github.com/z1skgr/FullOpenStack2023/tree/main/Part%200)

* [4](https://github.com/z1skgr/FullOpenStack2023/blob/main/Part%200/Ex0.4/4.md) 

* [5](https://github.com/z1skgr/FullOpenStack2023/blob/main/Part%200/Ex0.4/5.md) 

* [6](https://github.com/z1skgr/FullOpenStack2023/blob/main/Part%200/Ex0.4/6.md)

## [Introduction to React](https://fullstackopen.com/en/part1)

1. [Introduction to React](https://fullstackopen.com/en/part1/introduction_to_react)  

2. [JavaScript](https://fullstackopen.com/en/part1/java_script)  

3. [Component state, event handlers](https://fullstackopen.com/en/part1/component_state_event_handlers)

4. [Debugging React apps](https://fullstackopen.com/en/part1/a_more_complex_state_debugging_react_apps)

There are four main topics to study in this part. First thing is familiarization with React-library for browser display using functions. Javascript mechanisms and event handlers contribute to app development

- [courseinfo](https://github.com/z1skgr/FullOpenStack2023/tree/main/Part%201/courseinfo) -  Course information web page with react basics

- [unicafe](https://github.com/z1skgr/FullOpenStack2023/tree/main/Part%201/unicafe) -  Statistic App demonstating event handling

- [anecdotes](https://github.com/z1skgr/FullOpenStack2023/tree/main/Part%201/anecdotes) - Anecdote generator with complex components/functions

[Solutions](https://github.com/z1skgr/FullOpenStack2023/tree/main/Part%201)

## [Communication with React](https://fullstackopen.com/en/part2)

1. [Rendering a collection, modules](https://fullstackopen.com/en/part2/rendering_a_collection_modules)  

2. [Forms](https://fullstackopen.com/en/part2/forms)  

3. [Getting data from server](https://fullstackopen.com/en/part2/getting_data_from_server)

4. [Altering data in server](https://fullstackopen.com/en/part2/altering_data_in_server)

5. [Adding styles to React](https://fullstackopen.com/en/part2/adding_styles_to_react_app)

React code structured apps using styles and communication with a backend api (REST)

- [courseinfo](https://github.com/z1skgr/FullOpenStack2023/tree/main/Part%202/courseinfo) - Extension of [part 1](https://github.com/z1skgr/FullOpenStack2023/tree/main/Part%201/courseinfo) with modifications and new features

- [phonebook](https://github.com/z1skgr/FullOpenStack2023/tree/main/Part%202/phonebook) - Phonebook app with design mechanisms in React 

- [countries](https://github.com/z1skgr/FullOpenStack2023/tree/main/Part%202/countries) - React app displaying information from [REST countries API](https://restcountries.eu) 

[Solutions](https://github.com/z1skgr/FullOpenStack2023/tree/main/Part%202)

## [Programming a server with Node](https://fullstackopen.com/en/part3)

1. [Node.js and Express](https://fullstackopen.com/en/part3/node_js_and_express)  

2. [Deploying App to Internet](https://fullstackopen.com/en/part3/deploying_app_to_internet)  

3. [Saving data to MongoDB](https://fullstackopen.com/en/part3/saving_data_to_mongo_db)

4. [Validation and ESLint](https://fullstackopen.com/en/part3/validation_and_es_lint)

Simple REST API in Node.js using the Express library. The application's data is stored in a MongoDB database. The application is deployed to the internet.

- [phonebook](https://github.com/z1skgr/FullOpenStack2023/tree/main/Part%203/phonebook-backend) - Full stack App Phonebook 

[Solutions](https://github.com/z1skgr/FullOpenStack2023/tree/main/Part%203)

## [Testing server User administration](https://fullstackopen.com/en/part4)

1. [Structure of backend application, introduction to testing](https://fullstackopen.com/en/part4/structure_of_backend_application_introduction_to_testing) 

2. [Testing the backend](https://fullstackopen.com/en/part4/testing_the_backend)  

3. [User administration](https://fullstackopen.com/en/part4/user_administration)

4. [Token authentication](https://fullstackopen.com/en/part4/token_authentication)

Extended REST API in Node.js using the Express library for user authentication-authorization from server side (backend). The application's data is stored in a MongoDB database. Integrated test for 

functionality verification. The application is deployed to the internet.

- [bloglist](https://github.com/z1skgr/FullOpenStack2023/tree/main/Part%204/bloglist-backend) - Backend App bloglist 

[Solutions](https://github.com/z1skgr/FullOpenStack2023/tree/main/Part%205)

## [Testing React App](https://fullstackopen.com/en/part5)

1. [Login in frontend](https://fullstackopen.com/en/part5/login_in_frontend)  

2. [props.children and proptypes](https://fullstackopen.com/en/part5/props_children_and_proptypes)  

3. [Testing React apps](https://fullstackopen.com/en/part5/testing_react_apps)

4. [End to end testing](https://fullstackopen.com/en/part5/end_to_end_testing)

User authentication-authorization from client side (frontend). The application's data is stored in a MongoDB database. Integrated test for 

functionality verification and real-time tests with component rendering.

- [frontend](https://github.com/z1skgr/FullOpenStack2023/tree/main/Part%205/bloglist-backend) - Front App bloglist 

[Solutions](https://github.com/z1skgr/FullOpenStack2023/tree/main/Part%205)

## [Advanced state management](https://fullstackopen.com/en/part6)

1. [Flux-architecture and Redux](https://fullstackopen.com/en/part6/flux_architecture_and_redux)  

2. [Many Reducers](https://fullstackopen.com/en/part6/many_reducers)  

3. [Communicating with server in Redux application](https://fullstackopen.com/en/part6/communicating_with_server_in_a_redux_application)

4. [React Query, useReducer and the context](https://fullstackopen.com/en/part6/react_query_use_reducer_and_the_context)

Redux library and React Query, for managing the state of React applications.

- [redux anecdote](https://github.com/z1skgr/FullOpenStack2023/tree/main/Part%206/redux-anecdotes) - Redux App anecdote 

- [redux unicafe](https://github.com/z1skgr/FullOpenStack2023/tree/main/Part%206/unicafe-redux) - Redux App unicafe 

- [react query anecdote](https://github.com/z1skgr/FullOpenStack2023/tree/main/Part%206/query-anecdotes) - React query App anecdote

[Solutions](https://github.com/z1skgr/FullOpenStack2023/tree/main/Part%206)

## [React Router](https://fullstackopen.com/en/part7)

1. [React Router](https://fullstackopen.com/en/part7/react_router)  

2. [Custom hooks](https://fullstackopen.com/en/part7/custom_hooks)  

3. [More about styles](https://fullstackopen.com/en/part7/more_about_styles)

4. [Webpack](https://fullstackopen.com/en/part7/webpack)

5. [Class components, Miscellaneous](https://fullstackopen.com/en/part7/class_components_miscellaneous)

React Router, CSS styles, Webpack configuration & Hook functions for React applications.

- [bloglist](https://github.com/z1skgr/FullOpenStack2023/tree/main/Part%207/bloglist) - React query App anecdote

[Solutions](https://github.com/z1skgr/FullOpenStack2023/tree/main/Part%207)

## [GraphQL](https://fullstackopen.com/en/part8)

1. [GraphQL-server](https://fullstackopen.com/en/part8/graph_ql_server)  

2. [React and GraphQL](https://fullstackopen.com/en/part8/react_and_graph_ql)  

3. [Database and User Administration](https://fullstackopen.com/en/part8/database_and_user_administration)

4. [Login and Updating Cache](https://fullstackopen.com/en/part8/login_and_updating_the_cache)

5. [Fragments and Subscriptions](https://fullstackopen.com/en/part8/fragments_and_subscriptions)

## [TypeScript](https://fullstackopen.com/en/part9)

1. [Background and Introduction](https://fullstackopen.com/en/part9/background_and_introduction)  

2. [First steps with TypeScript](https://fullstackopen.com/en/part9/first_steps_with_type_script)  

3. [Typing an Express App](https://fullstackopen.com/en/part9/typing_an_express_app)

4. [React with types](https://fullstackopen.com/en/part9/react_with_types)

5. [Grande finale: Patientor](https://fullstackopen.com/en/part9/grande_finale_patientor)

Typescript, JavaScript open-source superset.

- [Calculators](https://github.com/z1skgr/FullOpenStack2023/tree/main/Part%209/Calculators)

- [CourseInfo](https://github.com/z1skgr/FullOpenStack2023/tree/main/Part%209/CourseInfo) 

- [Ilari's diary](https://github.com/z1skgr/FullOpenStack2023/tree/main/Part%209/Ilari%20diary) 

- [Patientor](https://github.com/z1skgr/FullOpenStack2023/tree/main/Part%209/Patientor)  

[Solutions](https://github.com/z1skgr/FullOpenStack2023/tree/main/Part%209)

## Exercises per part

Exercises per roundPart 06/6Part 423/23Part 822/26Part 114/14Part 523/23Part 924/29Part 220/20Part 623/23Part 322/22Part 721/21Total198/207