Coder Social home page Coder Social logo

liker's Introduction

Liker

Real-time web application, where users can share the list of their own suggestions and vote for best one.

UI Components

  • Suggestions table

    List of current suggestions, where each suggestion row contains votes counter.

    Clicking on votes counter user adds or removes his own vote for current suggestion

    User can vote for single suggestion only once

    When user adds his vote for suggestions, "like" symbol appears near the counter

  • Suggestion form

    Simple form, containing text input and submit button, where user can add his own suggestions

Tasks

Build simple UI, where user can add, preview or vote for his own suggestions (like a todo list). No synchronization between users is required at the moment

Implementation

This project was bootstrapped with Create React App to speed things up.

I've used Redux for state management though it's an overhead for project like this. To simplify things - Redux actions and reducers were bundled together based on ducks-modular-redux proposal.

Components could be split up into smaller and more generic ones, but hopefully code is readable enough as it is now.

In real world application I would also introduce some CSS methodology like BEM and use SCSS or some more advanced post-css modules, but I kept it simple for now.

Running the project

  1. Install dependencies by running yarn or npm install.
  2. Start the application in development mode by running yarn start or npm start.

To run tests - yarn test or npm start.
Production build - yarn build or npm run build.

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.