timiscoding / blog-list

Manage, share, like and comment on blog links with users

Blog List app

An app that lets users manage blog links, share, like and comment.

Try it out

(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

Storybook

About

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.

Dev build

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

Running locally

In /client:

npm start
npm run server
npm run storybook (for visual testing)

Additional

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

Outcome

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