Squalvj Boilerplate
This project is built using create-react-app for the plain react setup with a tweak by myself
Work smart, not work hard.
- ✅ SCSS
- ✅ Axios
- ✅ Service Call Architecture (create from scratch by myself, fork here: https://github.com/squalvj/frontendServiceArchitecture)
- ✅ Proptypes
- ✅ Lodash
- ✅ React Router
- ✅ Enzyme
- ✅ Infinite Scroll Pagination
- ✅ Alias Import Abolute Path
- ✅ .env production & development
- ✅ Modern Grid Layout- ✅ Responsive
- ✅ Newsletter will show after hit bototm of content grid
Folder Structure
Make the structrure even more tidy than your room
The folder structure is really easy to manage and it has strong meaning for new developer that would maintain this project, it would fit you guys that have OCD :) This kind of structure is being used in large scale apps on my experience and quite reliable.
project
│ README.md
│ package.json
│ .env.development -> environment dev
│ .env.production -> environment production
└───build -> Builded package...
└───src
| └───service -> List api & generic service wrapper...
| └───module -> Standard getter call and custom error handling...
| └───styles -> Base & Generic css class...
| └───mocks -> Offline response mock for testing...
| └───utils -> Generic reusable function...
| └───components -> Generic component...
| └───container
| | └───[NAME_OF_CONTAINER] -> can be wrapper for connecting redux state
| | | └───COMPONENT -> the component inside container & the style itself
| | App.js -> Wrapper root component place modal here...
Feature
- Newsletter will shown if you reach the bottom of Grid content height
- Cookies will slide up after click ok
- Responsive
- Cross browser Platform
Wrapper Service Call
This is the things that i love, the wrapper built using Axios is has rich configuration, you can intercept before call, after call, you can validate if backend returning some special error code that need to show to the user, we can put the function in the generic interceptor in this file, and also we can dispatching (show/hide) generic loader in this file aswell if we use redux :)
How to run
You might want to setup environment for development and production seperately, you can do this by:
- .env.development -> Setting variable for dev mode
- .env.production -> Setting variable for production mode
Running the project is easy like snapping your finger.
- install the dependencies by running 'yarn'
- run 'npm run start' to start development mode
- thats all...
Test
- run 'npm run test'
Build
- run 'npm run build'
- the compile file will be inside the folder build
Feel free to contact me if anything happen on squalvj@gmail.com Medium: https://medium.com/@squalvj Github: https://github.com/squalvj Codepen: https://codepen.io/squalvj/