Ecosyste.ms: Awesome

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

Awesome Lists | Featured Topics | Projects

https://github.com/ibrahima92/fullstack-typescript-mern-todo

Full-stack TypeScript App with React, Nodejs and MongoDB
https://github.com/ibrahima92/fullstack-typescript-mern-todo

Last synced: 11 days ago
JSON representation

Full-stack TypeScript App with React, Nodejs and MongoDB

Host: GitHub
URL: https://github.com/ibrahima92/fullstack-typescript-mern-todo
Owner: ibrahima92
Created: 2020-07-21T17:21:09.000Z (over 4 years ago)
Default Branch: master
Last Pushed: 2023-02-15T10:49:41.000Z (over 1 year ago)
Last Synced: 2024-08-01T08:17:00.993Z (3 months ago)
Language: TypeScript
Homepage:
Size: 1.4 MB
Stars: 152
Watchers: 3
Forks: 83
Open Issues: 37
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

awesome - ibrahima92/fullstack-typescript-mern-todo - Full-stack TypeScript App with React, Nodejs and MongoDB (TypeScript)

README

        # How To Build a Todo App with React, TypeScript, NodeJS, and MongoDB

In this tutorial, we will be using TypeScript on both sides (server and client) to build a Todo App from scratch with React, NodeJS, Express, and MongoDB.

So, let's start by planning the API.

[Read the article](https://www.ibrahima-ndaw.com/fr/blog/advanced-typescript-cheat-sheet/)

- [API with NodeJS, Express, MongoDB and TypeScript](#api-with-nodejs-express-mongodb-and-typescript)

  - [Setting up](#setting-up)

  - [Create a Todo Type](#create-a-todo-type)

  - [Create a Todo Model](#create-a-todo-model)

  - [Create API controllers](#create-api-controllers)

    - [Get, Add, Update and Delete Todos](#get-add-update-and-delete-todos)

  - [Create API routes](#create-api-routes)

  - [Create a Server](#create-a-server)

- [Client-side with React and TypeScript](#client-side-with-react-and-typescript)

  - [Setting up](#setting-up-1)

  - [Create a Todo Type](#create-a-todo-type-1)

  - [Fetch data from the API](#fetch-data-from-the-api)

  - [Create the components](#create-the-components)

    - [Add Todo Form](#add-todo-form)

    - [Display a Todo](#display-a-todo)

  - [Fetch and Display data](#fetch-and-display-data)

- [Resources](#resources)