This project was bootstrapped withĀ Create React App.
The project includes extra packages and improved file structure.
This project gets its data from Artic EDU (The Art Institute of Chicago) for demo purposes, it’s an open API and doesn’t require a key. View its documentation atĀ Art Institute of Chicago APIĀ More Public API’s can be foundĀ here.
Project’s main modules
Shows the fetched posts, fetched posts are limited to 20, pagination is should be implemented to fetch more, also, images should be lazy-loaded.
Post image should be lazy-loaded.
- src
- components // reusable react components
- CircularProgress
- Header
- PostItem
// Each component has the following structure:
- * ComponentName
- ComponentName.module.scss
- ComponentName.test.tsx
- ComponentName.tsx
- index.ts
- hocs
- withErrorHandler.tsx
- lib // helpers
- scripts
- apis.ts // contains all the API calls
- axios.ts
- test-utils.js
- utils.ts
- styles
- abstracts
- _mixins.scss
- _variables.scss
- main.scss
- routes // main modules, which are react components and might have a redux store
// It's not named containers because we might have containers that are not pages/routes, so a new folder called containers will be added for them.
// Each route has the same structure as components but some routes might have a store folder that contains all Redux's related files.
- ErrorPage
- HomePage
- SinglePost
- * RouteName
- store
- actions.spec.ts
- actions.ts
- connector.ts // exports Redux's connect HOC
- constants.ts
- reducers.spec.ts
- reducers.ts
- sagas.spec.ts
- sagas.ts
- RouteName.module.scss
- RouteName.test.tsx
- RouteName.tsx
- index.ts
- index.tsx // contains the main React Router DOM routes, new routes must be added here
- App.test.tsx
- App.tsx
- config.ts // App's config, now it only contains API_URL and POSTS_LIMIT
- global-reducers.ts // state's reducers, add new reducers here
- global-sagas.ts // connect routes sagas here
- index.tsx
- store.ts // Redux store implementation
InstallĀ Node.jsĀ and then open the Terminal/CMD and navigate to the project’s folder. Run the following command:
npm insatll
npm start
Runs the app in the development mode.
OpenĀ http://localhost:3000Ā to view it in the browser.
The page will reload if you make edits.
You will also see any lint errors in the console.
npm run build
Builds the app for production to theĀ build
Ā folder.
It correctly bundles React in production mode and optimizes the build for the best performance.
The build is minified and the filenames include the hashes.
Your app is ready to be deployed!
See the section aboutĀ deploymentĀ for more information.
npm run test
Launches the test runner in the interactive watch mode.
See the section aboutĀ running testsĀ for more information.
npm run eject
Note: this is a one-way operation. Once youĀ eject
, you canāt go back!
If you arenāt satisfied with the build tool and configuration choices, you canĀ eject
Ā at any time. This command will remove the single build dependency from your project.
Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands exceptĀ eject
Ā will still work, but they will point to the copied scripts so you can tweak them. At this point youāre on your own.
You donāt have to ever useĀ eject
. The curated feature set is suitable for small and middle deployments, and you shouldnāt feel obligated to use this feature. However we understand that this tool wouldnāt be useful if you couldnāt customize it when you are ready for it.
You can learn more in theĀ Create React App documentation.
To learn React, check out theĀ React documentation.
Stay safe š·