(Backend is hosted on a free Heroku account so the data may take a while to fetch on first page load)
Test username/password: tim / tim
Frontend: React, Redux, Styled-components, Storybook
Backend: Node, Express, MongoDB, Mongoose, Jest
This project started out as my submission in part 7 of the Full Stack course to learn redux and grew from there.
Server requirements (works on version):
- node 11.10
- mongodb v3.4 or mongo cloud - sign up for a free account
Secrets are stored in /server/.env. See /server/.env.example.
The client uses create-react-app and proxies all backend requests.
In order for the client to talk to the server, the port chosen in .env
needs to match the one in /client/package.json
"proxy": "http://localhost:3003",
Run npm i in /client and /server
In /client:
npm start
npm run server
npm run storybook (for visual testing)
Things I added on top of the project requirements:
- pagination with client caching
- sort by fields
- multiple blog deletion
- form validation
- a design system...sort of (check out the storybook)
- notifications
- mobile responsive
- react-spring animations
Learnt some notable things:
- Redux
- normalizing data reduces stale data, improves performance
- co-locating selectors in reducers makes refactors in state data structure changes easier
- redux middleware scales better for async actions over redux thunks
- styled-components
- not needing to name classes is a win
- easier to remove dead code
- dynamic styles based on props are convenient
- React hooks
- logic reuse and less boiler plate is a major plus
- a lot of subtle gotchas compared with classes