Demo: https://voland91.github.io/kudos/
This project was a recrutment task in one of the software houses. I've made it in ReactJS based on provided wireframes in guidelines.
In a few words: this is an app that shows list of posts created by users. Posts contain information such as:
- date (how long ago post was added),
- name of author,
- post text (with emojis, hashtags and ability to mention other users),
- kudos (personalized badge),
- group (to which office department user belongs)
User can add new posts with applied validation (text is not mandatory) and new posts will be visible until refreshing the page. Users, kudoses and groups are stored in database, to which you can qucickly add new records.
I used: ReactJS, Create React App, React Router, React Redux, Styled Components, React-Select, DayJS, DraftJS + plugins (counter, emoji, hashtag, mention), React Bootstrap, React Responsive, HTML React Parser, PropTypes, Atomic Design ande some FontAwesome icons as svgs.
To deploy on your machine clone this repo, run npm install command and npm start afterwards. Enjoy ! :)
This project was bootstrapped with Create React App
Links:
- React Router: https://github.com/ReactTraining/react-router
- React Redux: https://github.com/reduxjs/react-redux
- Styled Components: https://github.com/styled-components/styled-components
- React-Select: https://github.com/JedWatson/react-select
- DayJS: https://github.com/iamkun/dayjs
- DraftJS: https://github.com/facebook/draft-js
- DraftJS plugins: https://github.com/draft-js-plugins/draft-js-plugins
- React Bootstrap: https://github.com/react-bootstrap/react-bootstrap
- React Responsive: https://github.com/contra/react-responsive
- HTML React Parser: https://github.com/remarkablemark/html-react-parser
- PropTypes: https://github.com/facebook/prop-types
- ESLint: https://github.com/eslint/eslint
- Atomic Design: https://bradfrost.com/blog/post/atomic-web-design/
- Font Awesome: https://fontawesome.com/