Skip to content

Goldchae/react-recoil-realworld

 
 

Repository files navigation

RealWorld Example App

React + Recoil codebase containing real world examples (CRUD, auth, advanced patterns, etc) that adheres to the RealWorld spec and API.

This codebase was created to demonstrate a fully fledged fullstack application built with React + Recoil including CRUD operations, authentication, routing, pagination, and more.

We've gone to great lengths to adhere to the React community styleguides & best practices.

For more information on how to this works with other frontends/backends, head over to the RealWorld repo.

Features

  • Authenticate users via JWT (login/signup pages + logout button on settings page)
  • CRU- users (sign up & settings page - no deleting required)
  • CRUD Articles
  • CR-D Comments on articles (no updating required)
  • GET and display paginated lists of articles
  • Favorite articles
  • Follow other users

Routing Guidelines

  • 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)
    • Authentication can be easily switched to session/cookie based
  • Settings page (URL: /#/settings )
    • Editor page to create/edit articles (URL: /#/editor, /#/editor/article-slug-here )
  • 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

Getting started

  • Move to the folder where you want to clone this repo and run these commands in order.
    • git clone https://github.com/sukam09/react-recoil-realworld-example-app.git
    • yarn or npm install
    • yarn start or npm start

Brought to you by Thinkster

Releases

No releases published

Packages

No packages published

Languages

  • TypeScript 98.7%
  • HTML 1.3%