Bucketly - A Travel Bucket List Web App

Overview

Bucketly is a sleek and visually appealing travel bucket list web app designed to help users create, edit, and delete their travel goals with ease. The frontend is built using HTML, CSS, JavaScript, and Vite (Vanilla JS) for a fast and efficient development process. The backend is powered by Node.js, Express.js, Prisma ORM, and Neon DB with PostgreSQL, providing robust and scalable server-side functionality. This project focuses on providing a smooth and responsive user experience, both on the client and server sides.

Features

• Beautiful Sleek UI: Designed with a focus on aesthetics and user-friendliness.
• CRUD Operations: Perform Create, Read, Update, and Delete operations on your travel bucket list using JavaScript arraylist.
• Responsive Design: Ensures a seamless experience across various devices and screen sizes.

Technologies Used

Frontend

• HTML: For structuring the web app.
• CSS: For styling and making the app visually appealing.
• JavaScript: For implementing functionality and interactivity.
• Vite (Vanilla JS): For fast and efficient frontend development and build process.

Backend

• Node.js: For running the backend server.
• Express.js: For building the server-side application.
• Prisma ORM: For database operations.
• Neon DB with PostgreSQL: For the database management system.

Deployment

• Vercel: For deploying the client-side application.
• Render: For deploying the backend server.

Project Details

This project represents the frontend component of the full stack Bucketly web app, developed by the GDSC MVJCE Tech Team. It serves as an educational tool to be taught in the frontend workshop conducted by GDSC MVJCE.

Folder Structure

• client/: Contains the frontend code.
• server/: Contains the backend code.

Installation and Usage

To run this project locally, follow these steps:

1. Clone the repository:

   git clone https://github.com/GDSC-MVJCE/Bucketly.git

2. Navigate to the project directory:

   cd bucketly

Setting Up the Frontend

1. Navigate to the client directory:

   cd client

2. Install the dependencies:

   npm install

3. Run the frontend application:

   npm run dev

Setting Up the Backend

1. Navigate to the server directory:

   cd ../server

2. Install the dependencies:

   npm install

3. Set up the database using Prisma:

   npx prisma generate
   npx prisma db push

4. Run the backend server:

   npm run dev

Authors

• @Shivam-Sharma-1
• @Vector-ops

Contribution

We welcome contributions to improve this project. If you have suggestions or find any issues, please feel free to open an issue or submit a pull request.

License

This project is licensed under the MIT License.

Acknowledgments

• Developed by the GDSC MVJCE Tech Team.

Contact

For more information, please reach out to us at gdscmvjce@gmail.com.