An open API service indexing awesome lists of open source software.

https://github.com/ahmed-maher77/crud-web-app-using-reactjs-bootstrap-scss

A React-based CRUD web application that allows users to manage instructors and courses, featuring operations to create, read, update, and delete records with high accessibility and responsive design.
https://github.com/ahmed-maher77/crud-web-app-using-reactjs-bootstrap-scss

bootstrap crud crud-application js oop react react-router-dom sass-framework scss

Last synced: 3 months ago
JSON representation

A React-based CRUD web application that allows users to manage instructors and courses, featuring operations to create, read, update, and delete records with high accessibility and responsive design.

Awesome Lists containing this project

README

        

# CRUD Web APP [using React.js, Bootstrap, and Scss]
This web application provides a fully functional CRUD (Create, Read, Update, Delete) system for managing instructors and courses. Built using ReactJS, Bootstrap, SCSS, and JavaScript, this app features a dynamic dashboard for effortless navigation and seamless user interactions. The application is optimized for high performance, accessibility, SEO, and intuitive user experience.


💻 **Used Technologies:**

- **Frontend:** HTML, CSS, JavaScript (ES6+), ReactJS
- **UI Frameworks:** Bootstrap, SCSS
- **Development Tools:** Node.js, npm
- **State Management:** React Hooks (useState, useEffect)
- **Routing:** React Router


🌐**Demo (Live Preview):** https://ahmed-maher77.github.io/crud-web-app-using-reactjs-bootstrap-scss


## ✨Key Features:
- CRUD Operations: Effortlessly Create, Read, Update, and Delete records of instructors and courses directly through the user-friendly dashboard.
- Data Persistence: Uses localStorage for data management to ensure session continuity and data retrieval between reloads.
- Accessible Design: Adheres to modern accessibility standards for inclusivity and usability for all users.
- SEO Optimized: Structured for high visibility on search engines, with semantic HTML and optimized metadata.
- High Performance: Features fast loading times and minimal latency, providing a smooth user experience.
- Responsive & User-Friendly: Designed with Bootstrap and custom SCSS for full responsiveness across devices and easy navigation through the app.

## 📥 Installation Instructions for Local Setup:
To download and run this project locally:
1. Ensure you have Node.js installed: If you don’t have it installed, download it from Node.js Official Website.
2. Clone the repository:

=> git clone https://github.com/yourusername/CRUD-Dashboard-Web-App.git

=> cd CRUD-Dashboard-Web-App
4. Install dependencies:

=> npm install
5. Run the application: For development mode:

=> npm start