https://github.com/ummamali/randomideasfe
Frontend for randomideas application. The Random Ideas frontend offers an interactive UI for managing ideas and user data through CRUD operations. It interacts with RESTful APIs and incorporates modern development practices, including modular JavaScript, Webpack, TailwindCSS, and Babel, ensuring an efficient development process.
https://github.com/ummamali/randomideasfe
babel crud-application css3 ecmascript fronetend html5 javascript representational-state-transfer restapi singlepageapplication webpack
Last synced: 4 months ago
JSON representation
Frontend for randomideas application. The Random Ideas frontend offers an interactive UI for managing ideas and user data through CRUD operations. It interacts with RESTful APIs and incorporates modern development practices, including modular JavaScript, Webpack, TailwindCSS, and Babel, ensuring an efficient development process.
- Host: GitHub
- URL: https://github.com/ummamali/randomideasfe
- Owner: Ummamali
- Created: 2024-11-10T07:27:46.000Z (8 months ago)
- Default Branch: main
- Last Pushed: 2025-02-18T16:50:30.000Z (4 months ago)
- Last Synced: 2025-02-18T17:43:09.303Z (4 months ago)
- Topics: babel, crud-application, css3, ecmascript, fronetend, html5, javascript, representational-state-transfer, restapi, singlepageapplication, webpack
- Language: CSS
- Homepage:
- Size: 74.2 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 💡 Random Ideas (Frontend)
A simple yet powerful frontend application built with Vanilla JavaScript to interact with the **Random Ideas** RESTful API.
---
## 📌 Project Overview
The **Random Ideas** frontend provides an interactive interface to manage ideas and user data using CRUD operations. It consumes RESTful API endpoints and features modern development practices like modular JavaScript, Webpack, TailwindCSS, and Babel for a smooth development experience.
---
## 🔧 Technologies Used
- **Node.js**: Backend runtime for building the development environment.
- **Webpack**: Module bundler for optimizing assets and code.
- **TailwindCSS**: Utility-first CSS framework for styling.
- **Babel**: JavaScript compiler for ensuring compatibility with older browsers.
- **HTML**: Structure of the application.
- **Vanilla JavaScript**: Core scripting for interactivity.
- **CSS**: Additional custom styles for the application.
---
# 🛠️ CRUD Functionalities
This project implements the following **CRUD (Create, Read, Update, Delete)** functionalities to manage resources effectively:
---
## 📌 Functionalities
### 1️⃣ **Create**
- **Purpose**: Add a new resource to the system.
- **Implementation**:
- Accepts data via forms or API requests.
- Validates the input before saving to the database.
- Returns a success message or error response upon completion.
### 2️⃣ **Read**
- **Purpose**: Retrieve and display data from the system.
- **Implementation**:
- Supports fetching a single resource or a list of resources.
- Includes query filters (e.g., search, sort, pagination) for better data management.
- Returns JSON data or renders it dynamically on the frontend.
### 3️⃣ **Update**
- **Purpose**: Modify an existing resource in the system.
- **Implementation**:
- Updates specific fields based on user input or API requests.
- Ensures only valid and authorized updates are performed.
- Returns the updated resource or a success confirmation.
### 4️⃣ **Delete**
- **Purpose**: Remove a resource from the system.
- **Implementation**:
- Deletes resources by their unique identifiers.
- Implements safeguards like confirmation prompts or soft deletion (optional).
- Returns a success message or error response.
---
## ⚙️ REST API Integration
The frontend consumes the following RESTful API endpoints:
### **Base URL**:
`http://localhost:5000/api/ideas`
`http://localhost:5000/api/users`
### **Endpoints**
#### 1️⃣ **Ideas Resource**
- **Endpoint**: `/api/ideas`
- **CRUD Operations**:
- **GET** `/api/ideas`: Fetch all ideas.
- **POST** `/api/ideas`: Submit a new idea.
- **PUT** `/api/ideas/:id`: Edit an existing idea by ID.
- **DELETE** `/api/ideas/:id`: Remove an idea by ID.
#### 2️⃣ **Users Resource**
- **Endpoint**: `/api/users`
- **CRUD Operations**:
- **GET** `/api/users`: Fetch all users.
- **POST** `/api/users`: Register a new user.
- **PUT** `/api/users/:id`: Edit user details by ID.
- **DELETE** `/api/users/:id`: Remove a user by ID.
---
## 🛠️ Methodology
This project follows the **CRUD** (Create, Read, Update, Delete) methodology for interacting with two main resources:
1. **Ideas**
2. **Users**
---
## 📦 Running the Frontend
1. **Clone the Repository**
```bash
git clone https://github.com/ummamali/randomideasfe.git
cd randomideasfe
2. **Install Dependencies**
```bash
npm install
3. **Run (Development Mode)**
```bash
npm run dev
## License
This project is licensed under the **MIT License**. For more details, visit [MIT License](https://opensource.org/licenses/MIT).