Git Product home page Git Product logo

cra-boilerplate's Introduction

CRA boilerplate

Getting started

1- Clone the repository

git clone [email protected]:smakosh/CRA-boilerplate.git

2- Create an account on the following platforms if you'd like to use them

  • Google Recaptcha
  • Google Analytics
  • Twitter
  • Sentry
  • Vercel (Highly recommended to deploy your React app smoothly)

3- Create your .env file locally on dev environment

cp .env.development.template .env

Installation and kickstart

4- Install dependencies using Yarn

yarn

5- Start your React app

yarn start

Features

  • Uses a feature based file structure
  • Context API used effectively following Kent C. Dodds's article
  • Reusable logic with React hooks
  • UI elements separated from the features, so that you can push them as an UI library on NPM in the future as your project grow and you start to export features as their standalone apps
  • Authentication already built in
  • Code splitting of your Authenticated/Unauthenticated routes using Supense and React.lazy
  • Helpers functions
  • SEO component ready and configured for you
  • Interfaces per feature

TODO

  • Add react-query to handle server state
  • Replace useFetchUser with a useQuery
  • Move to cookies
  • Setup React testing library
  • Setup Cypress
  • Setup Ontwik-UI with react-flex-ready
  • Include the full auth flow with reset and forgotten password

License

This project is licensed under the MIT License - see the LICENSE.md file for more details

cra-boilerplate's People

Contributors

dependabot[bot] avatar fdrissi avatar kafiln avatar smakosh avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

cra-boilerplate's Issues

Add localStorage helper.

Hey @smakosh ๐Ÿ‘‹ ,
as we discussed, I would like to work on this little enhancement (separating localStorage: get, set, remove, clear).

TO DO

  • Remove GA

It's optional

  • Turn Google Recaptcha key into an env variable
  • Add more common components
  • Documentation
  • Setup unit, integration and e2e tests (testing-library, jest and cypress)
  • Handle both the http only cookie authentication and storing the token in local storage approaches rather just the latest.

Typescript version

Hey @smakosh ๐Ÿ‘‹ ,
I have a suggestion: a typescript version of your boilerplate.
it will be on another branch, so anyone can use the js or ts version.
what do you think?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.