You can view the demo here
You can clone the project to your local computer.
- In your preffered folder, open your terminal and type the command
git clone https://github.com/Mykmicheals/gmailClone.git
-
After cloning the project unzip the folder
-
Navigate to the folder using
cd gmail_clone
- Install all dependencies using
npm install
- to run project on your localhost use the command
npm start
-
Public folder. This is a very important folder in our app. This folder contains the index.html file and the manifest.json file. The manifest. json provides information about a web application in a JSON text file, necessary for the web app to be downloaded and be presented to the user similarly to a native app
-
src folder. The src folder contains the various react components and the styled components neccessary for the website. The re-usable components are also stored in the src folder
-
Redux folder. The redux folder is used to store state managed for the webapp. They are various independent states managed in the website
-
package.json file The package.json file contains neccessary configurations for the webapp. The file contains the various scripts and dependencies to make our webapp function properly
- React
- Redux
- Redux-logger
- styled-components
- react-icons
- reselect
- react-router-dom
React is the frontend javascript library used to build this gmail clone. React makes it painless to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes.
Redux was used to manaage the entire state of the website.
- Created a redux store
- Created different files to handle state updates
- Subscribed to different state updates
redux logger is a production Redux logging tool that lets you replay problems as if they happened in your own browser. Its a great debugging tool finding errors within our website. It's an extension that tracks the application's state changes. You can trace, jump, skip any action that has been dispatched
i used styled components to style our react app. Styled-components is a CSS-in-JS styling framework that uses tagged template literals in JavaScript and the power of CSS to provide a platform that allows you to write actual CSS to style React components.
I used Reselect to compose selectors and the memoization can prevent expensive selector code from running. The memoization can also prevent needless re renders. What you should consider is maintainable code and with reselect you can write selector logic once and re use it by composing selecto
- react": "^18.0.0",
- react-dom": "^18.0.0",
- react-icons": "^4.4.0",
- react-redux": "^8.0.2",
- react-router-dom": "^5.3.3",
- react-scripts": "^5.0.1",
- redux": "^4.2.0",
- redux-logger": "^3.0.6",
- reselect": "^4.1.6",
- styled-components: ^5.3.5