Giter Club home page Giter Club logo

web_showcase's Introduction

My Web Showcase

App screenshot App screenshot App screenshot

Features

  • Responsive
  • Light/Dark Mode
  • Dynamic & Data-driven UI. Changeing values will automatically change the UI !
  • Written in modern React, only functional components with hooks
  • All custom Ui elements
  • Simple local React state management, without redux, mobx, or similar

Setting up development environment 🛠

  • Install nodeJs if you don't have it already.
  • Clone this repository
  • npm run install-dependencies
  • npm run dev to start a quick development server
  • App should now be running on http://localhost:8080/

What's missing?

There are features missing from this showcase product which should exist in a real product:

Drawer Nav bar in mobile♿

A lot of care has been taken to make the pages responsive, but the navbar menu currently dissapears in mobile device, which is the expected behaviour. And the next step would be to add a hamburger type buttonon the top right that opens up the nav menu

Accessibility ♿

Not all components have properly defined aria attributes, visual focus indicators etc. Most early stage companies tend to ignore this aspect of their product but in many cases they shouldn't, especially once their userbase starts growing.

Unit/Integration tests 🧪

Both Client and API are currently tested through end-to-end Cypress tests. That's good enough for a relatively simple application such as this, even if it was a real product. However, as the app grows in complexity, it might be wise to start writing additional unit/integration tests.

License

MIT


web_showcase's People

Contributors

rajarshi-ch avatar

Watchers

 avatar

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.