📝 Project Name – Momento

A frontend web application built using Vite-React.js and Tailwind CSS, featuring a multi-step event creation flow, Google Maps integration, and secure API communication with the backend for real-time event management.

Example: An Event Manager that allows users to create, edit, and track events, upload media, invite participants, and monitor engagement—all through an interactive, responsive UI.

---

🚀 Live Demo

🌐 Live App Will be updated soon

---

🎥 Video Walkthrough

📽 Watch the walkthrough Yet to be added

---

🛠 Features

• Signup/Login: Secure user authentication using JWT for protected routes and personalized content.
• Authentication, Authorization, Role-Based Access Control: Access to pages and actions is controlled based on login status and user role (e.g., event organizer).
• Multi-Step Event Creation Form: Users can create events in a structured step-by-step process—Basic Info, Schedule, Location, Media, Invites, and Preview.
• Upload and Manage Media: Upload images or videos using Cloudinary and manage them with previews and delete options.
• Interactive Map for Location Selection: Integrates Google Maps to allow users to search and select event locations with auto-filled address and coordinates.
• Invite Users with Custom Messages: Send event invitations via email, with custom messages per invitee.
• Event Preview and Submission: Full event data preview before submission to avoid mistakes.
• Dashboard with Visual Stats: Real-time event statistics including RSVPs, comments, invitations, and total events.
• Responsive Design (Flexbox/Grid): Optimized UI for mobile, tablet, and desktop using Tailwind CSS layout utilities.
• Form Validation and Error Handling: Frontend validation and meaningful error messages on each step of the event form.
• Draft Saving Support: Events can be saved in-progress and continued later without data loss.
• Keyboard Accessibility: Buttons and forms can be navigated and operated with the keyboard for improved accessibility.

---

📁 Project Structure

momento-frontend/
├── public/
│ └── images/ # Static images (e.g., SVGs)
├── src/
│ ├── api/ # API functions and axios setup
│ ├── assets/ # App-wide assets (icons, images, etc.)
│ ├── components/ # Reusable React components
│ ├── context/ # React context providers (e.g., Auth, Theme)
│ ├── pages/ # Main page-level components (routes/views)
│ ├── routes/ # Route definitions for the app
│ ├── utils/ # Helper functions and utilities
│ ├── App.css # Global styles
│ ├── App.jsx # Root component
│ ├── index.css # Additional global styles
│ └── main.jsx # React app entry point
├── .env # Environment variables
├── .gitignore # Git ignored files
├── eslint.config.js # Linting configuration
├── index.html # HTML template
├── package.json # NPM dependencies and scripts
├── package-lock.json # Exact dependency versions
└── README.md # Project documentation

---

🧠 Concepts Demonstrated

The frontend is a modern React.js application leveraging key JavaScript and DOM features, integrated tightly with backend APIs.

🔹 Core Functionalities

• 🎯 DOM Manipulation: Although React abstracts direct DOM access, under the hood it manages:

  • querySelector, createElement, appendChild, etc. via React’s virtual DOM.
  • Component lifecycle hooks for dynamic rendering.

• 🎯 Event Handling: Handled through React’s synthetic event system:

  • Events like onClick, onSubmit, onChange, etc.
  • Integrated form behaviors and button interactions.

• 🎯 Class & Style Toggling:

  • classList.add/remove/toggle equivalents via conditional className in JSX.
  • Dynamic styling based on state.

---

🔌 Backend Integration

• 🔗 REST API Communication:

  • Uses fetch or axios to perform GET, POST, PUT, and DELETE operations.
  • Endpoints include authentication, event CRUD, user management, and media handling.

• 📦 JSON Handling & Promises:

  • API responses are parsed using .json().
  • Promise chaining with .then() and error management via .catch().

• ⚙️ Async JavaScript:

  • Widely uses async/await for API calls inside React useEffect or handlers.

• 📝 Form & Input Handling:

  • Controlled form inputs with useState.
  • Validation and user feedback integrated in each form component.

• 🗂 Optional Local Caching:

  • localStorage used optionally to persist authentication tokens or form drafts when necessary.

---

🔌 Backend API

• The app integrates with a RESTful API.

• Base URL: https://momento-backend-ys6c.onrender.com/api

• Supported endpoints examples:

  • GET /events/
  • POST /events/
  • DELETE /events/:eventId

---

🧪 How to Run Locally

1. Clone the repo:

git clone https://github.com/your-username/project-name.git

2. Navigate into the project:

cd project-name

3. Start a backend server (if needed) or connect to an existing one

4. Open index.html in your browser or npm run dev in the terminal

---

🧱 Tech Stack

• Frontend: React.js (with JSX), Tailwind CSS, JavaScript (ES6+)
• Backend (API): Node.js, Express.js, MongoDB (via Mongoose)
• Authentication: JWT-based Auth, Protected Routes
• File Upload: Cloudinary + Multer
• Email Service: Nodemailer
• Geolocation & Maps: Google Maps API
• Form Handling & Validation: React Hooks, Custom Validation
• State Management: React Context API
• Routing: React Router DOM
• Tools: Fetch API / Axios, Git, dotenv, Eslint

---

🌱 Future Improvements

• Authentication improvements with refresh tokens or session-based strategies
• Pagination and filtering for events and invites
• Push notifications or WebSocket-based real-time updates for invitations and reminders
• Offline support using Service Workers for improved reliability
• Admin dashboard for analytics and user management
• Calendar view integration for scheduling clarity
• Theming (Light/Dark mode) for accessibility

---

👤 Author: Pooja Jaiswal