https://github.com/ntonbala/items-comments
Items & comments is a client app allowing user to add items and comment them. State is stored in Redux store. Data is stored in Local Storage, interaction with it is provided by Redux Thunk. For variant with routing and data fetching due to URL changes look for master branch. For variant without routing look for redux branch.
https://github.com/ntonbala/items-comments
babel eslint lodash qs react react-dom react-hot-loader react-redux react-router redux redux-devtools redux-thunk webpack webpack-dev-server
Last synced: about 2 months ago
JSON representation
Items & comments is a client app allowing user to add items and comment them. State is stored in Redux store. Data is stored in Local Storage, interaction with it is provided by Redux Thunk. For variant with routing and data fetching due to URL changes look for master branch. For variant without routing look for redux branch.
- Host: GitHub
- URL: https://github.com/ntonbala/items-comments
- Owner: NtonBala
- Created: 2017-09-15T09:36:23.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2022-12-15T20:01:41.000Z (over 3 years ago)
- Last Synced: 2026-01-03T16:27:56.720Z (5 months ago)
- Topics: babel, eslint, lodash, qs, react, react-dom, react-hot-loader, react-redux, react-router, redux, redux-devtools, redux-thunk, webpack, webpack-dev-server
- Language: JavaScript
- Homepage: https://NtonBala.github.io./items-comments
- Size: 6.8 MB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Items & Comments
Items & Comments is Empeek test task. The app allows user to add items and comment them, storing data in browser's
Local Storage.
Technologies used: Loacal Storage API, React, ReactDOM, React Router, Redux, Redux Thunk, React Redux and Lodash with QS as helpers.
## Architecture
App is written with `class` components. App component is wrapped by React-Router. Page data fetching is provided by `prepareData` function that gathers route's data. Business logic is held in HOCs (`ItemsContainer` & `CommentsContainer`).
Redux store holds the App's state. The state's structure looks like:
```
{
items: [
{
id: number,
name: string,
comments: number
}
],
activeItem: {
id,
name,
comments: ['string']
}
}
```
Data structure is held in browser's Local Storage and looks like array of object oriented documents:
```javascript
[
{
id,
name,
comments
}
]
```
Interaction with Local Storate API is provided by Redux Thunk middleware.
## Development Environment
There's only Development Environment available up to now. It is configured using Webpack, Babel and React Hot Loader.
Webpack Dev Server is used as development server. There're Redux Dev Tools added to control app's state in development
(is in invisible mode by default, use Ctrl+H to open Dev Tools monitor). ESLint is used as a linter.
## Running
Pull master branch and run npm install to install all dependencies.
To launch the app run npm start and go to http://localhost:3000.