Code Monkey home page Code Monkey logo

todo2023's Introduction

My Personal Todo List

Tech Stack

Client: HTML, CSS, React, React-router, Material UI, React Hot Toast

Server: Node, Express, Bcrypt, Cors, JWT

Database: MongoDB, Mongoose

Test: Jest, Supertest, Postman

Deployment: Render

Objectives

For the Backend: Creating a server that will handle the requests from the Frontend, the connection with the database and the Google authentication. It should make use of controllers to handle requests and models to perfom actions on the database.

For the Frontend: Aside from allowing the user to log in and add tasks, my goal was to offer them a stressless experience with the app. I paid attention to the aesthetic, added some visual notifications using Toast and Material UI. While I heard a lot about accessibility, I deplore that my projects so far did not offer a good experience. This time, I made a conscious effort to adhere to HTML semantic markup, add hidden label tag above inputs for screen readers.

Difficulties Encountered

I took a step back in this project by letting the Oauth2 authentication go. While I could log in and out using OAuth2, I have not succed in keeping the session alive with the user authenticated. After pending quite some time to debug this, I felt I could not use the Oauth2 properly enough to guarantee the safety of the user's credentials.
-> Replace with a register/login form and the use of JSON Web Token.

Deploy to render was quite the challenge, and I did not expect it! While the Frontend was deployed, it could not communicate with the Backend due to Cors issue and 502 gateway error. It appears Render takes the lead to secure all websites and web services.
-> It was all good after switching my code from creating an https server to an http server.

After deployment, when refreshing a page, the routing was not working, and it displayed a 'Not found' page.
-> After testing some changes in the code, it appeared that I needed to define a rewrite rule that would redirect all routing requests to 'index.html' on Render.

Command

  npm start

start develop script

  npm run develop

Place for Improvements

  • Research to improve accessibility
  • Connection to the Backend is currently quite slow, this is due to Render
  • Limit the number of tasks to be updated at once at a time
  • Add loading element
  • Write a proper 404 error page

Take a peek

todolist

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.