Write an article or Share a link

React + Redux Blog With CRUD, Auth & Advanced patterns

Hints Staff
4 months ago
React + Redux Blog With CRUD, Auth & Advanced patterns by html hints

In this Article, learn React + Redux codebase containing real world examples (CRUD, auth, advanced patterns, etc) that adheres to the RealWorld spec and API. All assets are provided with detailed explanation & full source code by Thinkster.


For Demo & Source Code Scroll down.

#Getting started

To get the frontend running locally:

  • 1. Clone this repo from github (Download Link given below)
  • 2. npm install
  • 3. npm start

Local web server will use port 4100 instead of standard React's port 3000 to prevent conflicts with some backends like Node or Rails. You can configure port in scripts section of package.json: we use cross-env to set environment variable PORT for React scripts, this is Windows-compatible way of setting environment variables.

#Making requests to the backend API

If you need to change the API URL to a local server, simply edit src/agent.js and change API_ROOT to the local server's URL.

Now let's define structure of login form.

# Functionality overview

  • 1. Authenticate users via JWT (login/signup pages + logout button on settings page)
  • 2. CRU* users (sign up & settings page - no deleting required)
  • 3. CRUD Articles
  • 4. CR*D Comments on articles (no updating required)
  • 5. GET and display paginated lists of articles
  • 6. Favorite articles
  • 7. Follow other users
  • You will get all files, when you download the source code. And after than you can edit it according to you

    if you face any issues you can contact by asking question with article link.

    You can go through Demo as well as Download source code for the same & make changes according to you

    ReactTemplate

    We use cookies to ensure better User Experience. Read More