React codebase containing real world examples
(CRUD, auth, advanced patterns, etc.) that adheres to the RealWorld spec and API.
This codebase was created to provide a "training ground" for new web developers to gain experience in building a fully fledged fullstack application built with https://reactjs.org/ including CRUD operations, authentication, routing, pagination, and more.
For more information on how to this works with other frontends/backends, head over to the RealWorld repo.
Live demo
The Redux Example Demo is a fully built out and hosted version of the RealWorld app using React and Redux. It can be used as reference material while training with this project.
Getting started
Most of the initial setup of this project has already been done for you. User registration, sign in, and sign up workflows have already been completed so that developers can focus on exercising the following skills in the context of a React application:
- Client-side routing with React Router.
- Fetching and updating data with an existing Rest API.
- Form data and state handling.
- Planning and implementing organization and structure of React components.
Get the code and install dependencies
First, you will need to fork this repository. After the repository is forked, you will need to clone the forked copy to your local machine and then install the dependencies. The following commands are an example of the steps that need to be taken:
# First, clone the forked repository
git clone {forked repository clone address goes here}
# Second, navigate in the terminal to the newly cloned repository
cd realworld-app-training-ground
# Third and last, use yarn to install project's JavaScript package dependencies
yarn installNOTE: yarn install can also be accomplished by just running yarn in the
project directory.
Local app development
This project was bootstrapped with Create React App. This means that a stellar local development environment is already set up. Some of the wonderful things that will make life easier when working on this application using the local development environment include:
- The page will reload if you make edits to the source code.\
- Lint errors and warnings will display in the console.
To start the app in development mode, run the following command from your terminal.\
yarn startThis will start the development server. It should automatically open the running React app in your default browser, but if it does you can manually open http://localhost:3000 to view it in the browser.
Using the hosted API
This project's API requests use the publicly available RealWorld App API at https://conduit.productionready.io/api.
Application Structure and Routing
Public Routes (does not require user to be signed in)
- Home page (URL:
/)- List of tags
- List of articles pulled from either Feed, Global, or by Tag
- Pagination for list of articles
- Sign in/Sign up pages (URL:
/login,/register)- Uses JWT (store the token in
localStorage)
- Uses JWT (store the token in
- Article page (URL:
/article/article-slug-here)- Delete article button (only shown to article's author)
- Render markdown from server client side
- Comments section at bottom of page
- Delete comment button (only shown to comment's author)
- Profile page (URL:
/profile/:username,/profile/:username/favorites)- Show basic user info
- List of articles populated from author's created articles or author's favorited articles
Private Routes (requires user to be logged in)
- Settings page (URL:
/settings) - Editor page to create/edit articles (URL:
/editor,/editor/article-slug-here)
Styles
Instead of having the Bootstrap theme included locally, this projects loads the precompiled theme from the RealWorld App's CDN (the header template does this by default):
<link rel="stylesheet" href="https://github.com/jakierice/realworld-app-training-ground/blob/main//demo.productionready.io/main.css" />Alternatively, if you want to make modifications to the theme, check out the theme's repo.