Skip to content

A Todo List app using React, Typescript, Fetch, SCSS and React Context.

Notifications You must be signed in to change notification settings

AEmmanouelides/todolist

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

11 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

TodoList

This project was bootstrapped with Create React App.

Notes

  • The app is responsive.
  • Data are fetched into the app by using Fetch API (browser build-in tool) through a fake free api from Jsonplaceholder.
  • React Context library was used to pass Todos data through the component tree without having to pass props down manually at every level.
  • A custom hook was created to fetch the initial data. /services/FetchData.tsx
  • SCSS preprocessor was used for stylesheets management.
  • Screenshots of the running app can be found at /screenshots
  • UPDATE - A Redux Store was created to manage and show the completed todos.
  • UPDATE 2 - A new page was created to show more details (userId) about the completed todos.
  • UPDATE 3 - React Router DOM npm package was used to implement dynamic routing in the app.

Available Scripts

In the project directory, you can run:

npm start

Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits.
You will also see any lint errors in the console.

npm test

Launches the test runner in the interactive watch mode.
See the section about running tests for more information.