Giter Club home page Giter Club logo

aircall's Introduction

Summary

Hello reviewer! This is my submission for the aircall challenge. I decided to make an implementation of the air call UI. There are two tabs, one for call activity and one for archived calls. Users can archive calls, unarchive the calls and mass reset the archived calls.

I wanted to use functional components and hooks, so I did update the version of React in the project. I believe that using these kinds of components is a best practice for long term support.

The project has been deployed via netlify here.

Some Thoughts

  • I debated extracting out the activity and archive feeds into their own single component but I decided this didn't really offer much benefit currently, as the component grew in complexity I would certainly opt to extract this UI into one or more separate components.
  • I would like to change up the date structure I store in state in the useCallData hook. Since we are already iterating over the data, i link I could store archived calls and active calls into separate keys holding the lists of the respective calls. Both would still be stored in a date object.
  • I would like to remove the update and reset functions outside of the component files and would explore using redux or the context API for this.
  • I would look into using a UI library. Material UI is one that I have been enjoying using. I opted to use MUI Icons, but perhaps we could extent that since I had to include MUI core as a dependency to use icons.
  • I could wrap the body in a loader function to show before we load api data.

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.