Skip to content

Commit 4fd00fe

Browse files
MohamedRizwan399MohamedRizwan399
authored
Merge pull request #31 from MohamedRizwan399/gh-pages
TRAPWLS-19 Latest Production code updated and deployment is successful
2 parents 7e91ade + bd415a3 commit 4fd00fe

File tree

3 files changed

+144
-0
lines changed

3 files changed

+144
-0
lines changed

‎LICENSE

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
Custom License for **Javascript CRUD with SampleTasks**
2+
3+
This repository and all its contents are the property of **Mohamed Rizwan**. Use of any part of this repository, including code, documentation, or resources, is only permitted with prior written consent from the owner.
4+
5+
Access to this repository is provided for the purpose of collaboration or review, as approved by the owner. Any use, modification, or distribution of the contents should be done with permission.
6+
7+
For any inquiries regarding permissions, please contact Mohamed Rizwan at **mohamedrizwan399@gmail.com**.

‎README.md

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
2+
# Javascript CRUD with SampleTasks
3+
4+
A Javascript application to demonstrate the comprehensive **CRUD** app built using ReactJS and Firebase. It implement user authentication with both Google Sign-In and username/password login methods, along with other key features such as API handling, local storage CRUD operations, and managing application state using Redux.
5+
The app also leverages modern React hooks, lifecycle methods, and routing for smooth navigation between pages.
6+
7+
## Features
8+
- **User authentication with Google Sign-In**: Users can sign in using their Google accounts using Firebase for secure authentication.
9+
- **Username/Password Authentication**: Custom username and password login using Firebse for added flexibility.
10+
- **CRUD Operations**: Ability to perform create, read, update, and delete operations with data stored in local storage.
11+
- **API Handling with Axios**: Handled API requests using Axios for fetching data from remote servers.
12+
- **Data Management with Redux**: Efficiently manage app state using Redux store to handle data across components.
13+
- **React Hooks and Lifecycle Methods**: Utilization of React hooks like useState, useEffect, useRef and lifecycle methods for optimal component behavior.
14+
- **Dynamic Routing**: Implemented navigation between pages with React Router for a dynamic user experience.
15+
- **Loader Implementation**: Display a loader during asynchronous operations to improve user experience.
16+
- **Responsive UI**: Fully responsive UI with styling using CSS and modern design principles.
17+
- **Header and Footer**: The header includes navigation tabs, and the footer provides links to "About Us" and "Contact Us" pages.
18+
19+
20+
## Prerequisites
21+
You need to install required version:
22+
- Node.js 16 LTS [Download Node.js](https://nodejs.org/)
23+
- Npm 8 >= or yarn
24+
25+
## Steps to Installation
26+
**Step 1:** Clone the repo
27+
```bash
28+
- https://github.com/MohamedRizwan399/CRUDJavaScriptSampleProject.git
29+
```
30+
31+
**Step 2:** Install the dependencies using npm
32+
```bash
33+
- npm install
34+
```
35+
36+
**Step 3:** Run the application
37+
```bash
38+
- npm start
39+
```
40+
Runs the app in the development mode.\
41+
Open [http://localhost:3000](http://localhost:3000) to view it in your browser.
42+
43+
The page will reload when you make changes.\
44+
You may also see any lint errors in the console.
45+
46+
**Step 4:** Run the test suites
47+
```bash
48+
- npm test
49+
```
50+
Launches the test runner in the interactive watch mode.\
51+
See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
52+
53+
**Step 5:** To run build in Production, if needed
54+
```bash
55+
- npm run build
56+
```
57+
Builds the app for production to the `build` folder.\
58+
It correctly bundles React in production mode and optimizes the build for the best performance.
59+
60+
61+
## Learn More
62+
63+
To learn React, check out the [React documentation](https://reactjs.org/).
64+
65+
### Code Splitting
66+
67+
This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting)
68+
69+
### Analyzing the Bundle Size
70+
71+
This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size)
72+
73+
### Making a Progressive Web App
74+
75+
This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app)
76+
77+
78+
### Deployment
79+
80+
This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment)

‎package.json

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
{
2+
"name": "javascript-crud-with-sampletasks",
3+
"version": "1.1.0",
4+
"homepage": "https://mohamedrizwan399.github.io/CRUDJavaScriptSampleProject",
5+
"private": true,
6+
"dependencies": {
7+
"@reduxjs/toolkit": "^1.9.7",
8+
"@testing-library/jest-dom": "^5.16.5",
9+
"@testing-library/react": "^13.4.0",
10+
"@testing-library/user-event": "^13.5.0",
11+
"axios": "^1.7.7",
12+
"cors": "^2.8.5",
13+
"firebase": "^11.0.1",
14+
"gh-pages": "^6.3.0",
15+
"jest": "^27.5.1",
16+
"jwt-decode": "^3.1.2",
17+
"nodemon": "^3.1.7",
18+
"react": "^18.2.0",
19+
"react-dom": "^18.2.0",
20+
"react-icons-kit": "^2.0.0",
21+
"react-redux": "^8.1.3",
22+
"react-router-dom": "^6.4.1",
23+
"react-scripts": "5.0.1",
24+
"react-spinners": "^0.14.1",
25+
"react-toastify": "^10.0.6",
26+
"react-uuid": "^1.0.3",
27+
"redux": "^4.2.0",
28+
"styled-components": "^5.3.5",
29+
"web-vitals": "^2.1.4"
30+
},
31+
"scripts": {
32+
"start": "react-scripts start",
33+
"build": "react-scripts build",
34+
"test": "react-scripts test",
35+
"eject": "react-scripts eject",
36+
"predeploy": "npm run build",
37+
"deploy": "gh-pages -b production -d build"
38+
},
39+
"eslintConfig": {
40+
"extends": [
41+
"react-app",
42+
"react-app/jest"
43+
]
44+
},
45+
"browserslist": {
46+
"production": [
47+
">0.2%",
48+
"not dead",
49+
"not op_mini all"
50+
],
51+
"development": [
52+
"last 1 chrome version",
53+
"last 1 firefox version",
54+
"last 1 safari version"
55+
]
56+
}
57+
}

0 commit comments

Comments
 (0)