💡 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

   git clone https://github.com/ummamali/randomideasfe.git
   cd randomideasfe
   

2. Install Dependencies

   npm install
   

3. Run (Development Mode)

   npm run dev
   
   

License

This project is licensed under the MIT License. For more details, visit MIT License.