Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/shyamg090/evento_website
Evento is a web application built with the MERN stack (MongoDB, Express, React, Node.js) for browsing, creating, and managing events. It features user authentication, event creation, image uploading via Cloudinary, responsive design with TailwindCSS, and secure data validation using Zod.
https://github.com/shyamg090/evento_website
expressjs jwt-authentication mongodb nodejs postman reactjs tailwindcss zod-validation
Last synced: 15 days ago
JSON representation
Evento is a web application built with the MERN stack (MongoDB, Express, React, Node.js) for browsing, creating, and managing events. It features user authentication, event creation, image uploading via Cloudinary, responsive design with TailwindCSS, and secure data validation using Zod.
- Host: GitHub
- URL: https://github.com/shyamg090/evento_website
- Owner: shyamg090
- Created: 2024-10-03T08:38:44.000Z (about 1 month ago)
- Default Branch: main
- Last Pushed: 2024-10-16T08:54:43.000Z (23 days ago)
- Last Synced: 2024-10-18T04:49:01.732Z (21 days ago)
- Topics: expressjs, jwt-authentication, mongodb, nodejs, postman, reactjs, tailwindcss, zod-validation
- Language: JavaScript
- Homepage:
- Size: 1.44 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# **Evento - Event Hosting and Management Website**
**Evento** is a web application built using the MERN (MongoDB, Express, React, Node.js) stack. It enables users to browse, create, and manage events. The app includes features like user authentication, event creation, and image uploading, all while maintaining a clean and responsive design with TailwindCSS. Zod is used for data validation, and Cloudinary manages image storage.
## **Features**
- **User Authentication**: Secure signup and login using JWT.
- **Event Management**: Create, view, edit, and delete events.
- **Explore Events**: Search and filter events based on date, location, and categories.
- **Responsive Design**: TailwindCSS ensures a mobile-friendly, modern design.
- **Image Uploads**: Store event images on Cloudinary.
- **Data Validation**: Zod is used for accurate and secure form validations.
## **Tech Stack**
### **Frontend**
- **React.js** for building interactive user interfaces.
- **TailwindCSS** for responsive and utility-first styling.
### **Backend**
- **Node.js** and **Express.js** for server-side operations.
- **MongoDB** for database management.
- **Mongoose** for object data modeling.
- **Zod** for data validation.
### **Other Integrations**
- **JWT** for user authentication and session management.
- **Cloudinary** for image upload and storage.
## **Installation**
### **Prerequisites**
Make sure you have the following installed:
- **Node.js**
- **MongoDB** (either locally or via MongoDB Atlas)
### **Steps to Install**
1. **Clone the repository:**
```bash
git clone https://github.com/your-username/evento.git
cd evento
```
2. **Install server dependencies:**
Navigate to the `backend` folder and run:
```bash
npm install
```
3. **Install client dependencies:**
Navigate to the `frontend` folder and run:
```bash
npm install
```
4. **Set up the `.env` file:**
Create a `.env` file in the `backend` folder with the following:
```bash
MONGO_URL=
MONGO_PASSWORD=
PORT=
JWT_SECRET=
CLOUD_NAME=
API_KEY=
API_SECRET_KEY=
CLOUDINARY_URL=
```
5. **Run the development server:**
- Start the backend server in the `backend` folder:
```bash
npm run dev
```
- Start the frontend in the `frontend` folder:
```bash
npm start
```
6. **Access the app**: Open your browser and go to `http://localhost:3000`.
## **Usage**
- **Create Events**: Users can log in and create new events by providing event details like name, date, location, and an image.
- **Browse Events**: Explore all listed events.
- **Manage Events**: Event creators can edit or delete their own events.
- **RSVP**: Users can RSVP to events and manage their participation status.
## **Styling and Image Uploads**
- **TailwindCSS** is used for styling to ensure a clean and responsive user experience.
- **Cloudinary** is integrated for handling event images, allowing users to upload and store event-related images directly to the cloud.
## **License**
This project is licensed under the MIT License.