Skip to content

Home

Jump to bottom
sthciN edited this page Feb 29, 2020 · 6 revisions

Welcome to the SnappBlog wiki!

This is just a test case of the entrance interview process of SnappMarket.

This application is made up of two main pages:

  • /
  • /article/:slug

On the home page, you can find all the articles from your database which is already configured using this structure: node-express-realworld-example-app.

And by clicking on each of them you may fly to the specific article page with the unique slug.

To add any comment there will be a Write Your Comment part and you need to jot down your name and email to have it done.

Based on whether you set it up on your local machine or exposed to the internet, you may manipulate the BASE_URL of your endpoints, which is available in /app/utils/constants directory. And also the favicon.ico source in index.html.

Run npm run build to have it in production mode.

This application is not responsive yet, but the PWA version will be released soon.

The Structure

I employed React Boilerplate structure with some manipulations. You may notice that there are two main directories in the app folder:

  1. components
  2. containers

The first are those which are just dummy components for the purpose of presentation and all the consuming data come from their parents' container through props. And the containers folder, on the other hand, holds containers that are in direct access with redux and store. You can dispatch any action only in containers and flow the processed data in the whole app by setting in or selecting from the store.

To dispatch any action, you need to define it in your container folder. To store a global value using redux, you need to have a global reducer in App container and I already injected these global states in the main reducers injector located in the /app directory.

After dispatching, saga catches your action on the fly (if you have already said it to) and it's your middleware time to handle the requests and/or dispatching further actions.

I have made up a requester in the utils directory and you need to call it with proper URL and options.

I used the butterfly structure to handle sequential actions and side-effects.

Clone this wiki locally