ayoub-g / todolist-frontend

Todo App

A basic and awesome todo app, built with React, Redux, RTK, Node, GraphQl and more 🥳
Explore the docs »

View Demo · Report Bug · Request Feature

Table of Contents

1. Description
   • Built With
2. Getting Started
   • Prerequisites
   • Installation
3. License
4. Contact
5. Acknowledgements

Description

Todo is a basic todo app with a sleek interface, you can add and remove tasks, no task update for this version 🙁 through this app you will learn a lot:

• How to use css-in-js in react with the latest material version
• How manage app global state with redux and RTK
• How to seperate side effect logic from components
• How asynchronous functions can communicate with redux using redux-thunk
• How to improve app performance with selectors
• How to write clean and maintainable code

Built with

Frontend:

• React
• Redux
• RTK
• Reselect

  Reselect is a selector library for redux, it improves code performance by computing selectors only when input data changes

• Material ui

Backend:

• node.js
• express.js
• graphql
• sequelize
• postgres

Getting Started

Prerequisites

To use this project you need to install npm and postgres

Installation

1. clone the front-end repository (this repository)

git clone https://github.com/ayoub-g/todoList-frontend.git

2. clone the backend repository

git clone https://github.com/ayoub-g/todo-server

3. cd to todo-server

cd todo-server

4. install npm dependencies

npm install

5. configure the database for local environment :

set environment variable to local

go to the file data/getConnectionString.js and create a postgres user and a database with the configuration described in the file or update it with your own configuration

const getConnectionString = async () => (
  stage === 'local' ?
    {
      host: 'localhost',
      database: 'todoapp',
      port: '5432',
      username: 'testuser',
      password: 'HbdEvgmtGUc98T',
    } : await getRemoteConfig());

5. start the server

npm start

if everything is ok, you should see in the terminal that the server is running on port 3001, and sequelize has created the todos table.

6. now it's time to configure the frontend, cd to the front-end repository

cd ../todoList-frontend

7. install npm dependencies

npm install

1. run the project, this will run the dev server at port 3000

npm start

12. open a new tab at http://localhost:3000

License

Distributed under the MIT License. See LICENSE for more information

Contact

Ayoub Gharbi - @AyyoubGharbi - [email protected]

Project Link: https://github.com/ayoub-g/todoList-frontend

Acknowledgements

Project icon

Icons made by Freepik from www.flaticon.com