Javascript CRUD with SampleTasks

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. The app also leverages modern React hooks, lifecycle methods, and routing for smooth navigation between pages.

Features

• User authentication with Google Sign-In: Users can sign in using their Google accounts using Firebase for secure authentication.
• Username/Password Authentication: Custom username and password login using Firebse for added flexibility.
• CRUD Operations: Ability to perform create, read, update, and delete operations with data stored in local storage.
• API Handling with Axios: Handled API requests using Axios for fetching data from remote servers.
• Data Management with Redux: Efficiently manage app state using Redux store to handle data across components.
• React Hooks and Lifecycle Methods: Utilization of React hooks like useState, useEffect, useRef and lifecycle methods for optimal component behavior.
• Dynamic Routing: Implemented navigation between pages with React Router for a dynamic user experience.
• Loader Implementation: Display a loader during asynchronous operations to improve user experience.
• Responsive UI: Fully responsive UI with styling using CSS and modern design principles.
• Header and Footer: The header includes navigation tabs, and the footer provides links to "About Us" and "Contact Us" pages.

Prerequisites

You need to install required version:

• Node.js 16 LTS Download Node.js
• Npm 8 >= or yarn

Steps to Installation

Step 1: Clone the repo

 - https://github.com/MohamedRizwan399/CRUDJavaScriptSampleProject.git

Step 2: Install the dependencies using npm

 - npm install

Step 3: Run the application

 - npm start

Runs the app in the development mode.
Open http://localhost:3000 to view it in your browser.

The page will reload when you make changes.
You may also see any lint errors in the console.

Step 4: Run the test suites

 - npm test

Launches the test runner in the interactive watch mode.
See the section about running tests for more information.

Step 5: To run build in Production, if needed

 - 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.

Learn More

To learn React, check out the React documentation.

Code Splitting

This section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting

Analyzing the Bundle Size

This section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size

Making a Progressive Web App

This section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app

Deployment

This section has moved here: https://facebook.github.io/create-react-app/docs/deployment