Giter Club home page Giter Club logo

product-viewer's Introduction

product-viewer

Simple site that displays what products are used by what users and what users are using what products.

Development

Have Docker installed along with docker-compose. From the project root run:

docker-compose up --build

Notes

  1. Used docker compose to separate the frontend from the backend.
  2. Extended the express api with a /users route.
  3. Users route makes use of a model (handles db queries) and controller (logic) to aggregate user data and return an array of items.
  4. Made use of HAL for better responses to make the (limited) api explorable.
  5. Added a /users/:id route to get a single user
  6. Initialized the UI using create-react-app
  7. Used CSS modules along with sass to style in a modular extensible way.
  8. Table display the user data and is responsive to sizing. (resize window < 580px)
  9. Pagination in the get /users api request.

Things I would do...

In its current state the application is quite basic. In hindsight, I would have used a ui/component framework to spend less time on styling and use that time to add features.

These are the things I'd add/change to make it more useable and pleasing:

  1. Break up the current sql query along with the data model so that I can display a minimal amount in the ui and give the user the option to display more (row expanding, modal, etc.).
  2. Add additional routes for products, and update the the current routes to include any necessary verbs.
  3. Add places in the UI for CRUD operations if it made sense to this type of application.
  4. Better error handling in the client and server.
  5. Validation in the server.
  6. API documentation.
  7. Thorough comments throughout the codebase.
  8. Unit testing using jest.
  9. pagination on the client side.
  10. Search functionality

product-viewer's People

Contributors

keithcruz avatar

Watchers

James Cloos avatar  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.