Skip to content

React todo list app with Redux for state management. Makes calls to three API services to fetch assets to display to user.

Notifications You must be signed in to change notification settings

mikejguo290/inspirational-homepage-todo

Folders and files

NameName
Last commit message
Last commit date
Oct 6, 2021
Oct 4, 2021
Oct 1, 2021
Oct 4, 2021
Oct 4, 2021
Oct 4, 2021
Nov 24, 2021
Oct 4, 2021
Oct 4, 2021

Repository files navigation

Inspirational Homepage - (fancy to-do list)

This is a React to-do list app which allows the user to record their goals. The user's visual experience is enriched with images, quotes and weather information fetched from APIs. Live demo here.

Table of Contents

General Information

The to-do list app aims to give the user a minimalist, yet attractive interface for goal setting.

For the user, the app serves the day's weather, inspirational images and an inspirational quote while they set and edits their goals for the day.

The app was built to explore the development process for an interactive, API connected React app, which is paired with Redux for state management. The features specification and look of the app came from Codecademy's Inspirational HomePage project but it is coded from scratch.

The project React/Redux development process:

  • Project planning and setting timelines.
  • Designing and wireframing the app.
  • Breaking down the app into React components
  • Building static React components
  • Connecting React components to Redux
  • Connecting to APIs
  • Publishing to the web

Technologies Used

  • React
  • Redux
  • Redux Toolkit
  • HTML
  • CSS
  • Netlify functions

Features

  • Users are shown an inspirational image
  • Users can go through multiple fetched images
  • Users can get more images once they exhaust each batch of fetched images
  • Users are shown an inspirational quote
  • Users can check the current weather
  • Users can write down their goals
  • Users can delete goals
  • Users can mark goals as complete

Usage

Click anywhere on the video below to play the demo

todo_updated_demo.mov

Screenshots

From initial wireframe to finalized app.

Wireframe screenshot

Finished app screenshot

Setup

Clone this repo and run npm install to install dependencies. This project will require connecting to Unsplash, Open Weather and Quotes REST APIs - which will involve setting up an account with each service.

Both development and deployment will require a Netlify account linked to your Git repository, in order to use the Netlify functions for API calls. Before publishing the app on Netlify, set up API secrets in Environment Variables section under Build & deploy > Continuous Deployment.

Project Status

Project development is paused for now.

Room for Improvement

  • Design the app to be mobile friendly.
  • Allow user to edit to-dos.
  • Allow user to input attributes about each to-do, such as due date, priority etc and allow sorting by these attributes.
  • Allow the web app to ask for user's location through the browser, and use provided longitude and latitude to serve up local weather instead of just London's weather.
  • Adaptive container background colour which can stand out against background images which are primarily lightly coloured as well as dark coloured.

Acknowledgements

Contact

Created by Mike Guo - feel free to contact me at mikejguo290@hotmail.com or on GitHub!

About

React todo list app with Redux for state management. Makes calls to three API services to fetch assets to display to user.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published