Welcome to the [PlayCafe] website repository! This project is part of GirlScript Summer of Code (GSSoC) Extended 🚀. Our cafe offers a warm and exciting environment for board game enthusiasts to gather, relax, and enjoy great food. This repository contains the code for the cafe's official website, aiming to create a fun and immersive online presence.
- ✨ Project Overview
- 🌐 Demo
- 🔥 Features
- 🛠️ Tech Stack
- ⚙️ Getting Started / 📥 Installation
- 📌 Usage
- 🔍 API Documentation
- 🤝 Contributing
- 🎯 Open Source Programs
- 🌟 Mentors
- 👀 Our Contributors
- ⭐ Support
- 📄 License
- 📬 Contact Us
The PlayCafe Website project is an exciting open-source initiative under GSSoC 2024 Extended. We aim to build a modern and engaging website for the cafe, where visitors can learn about our games, book tables, and stay updated with our events and offers.
🎯 Goal: Create a seamless, user-friendly, and vibrant digital space for board game lovers.
🔗 Check out the live version of the website: Live Demo
| Feature | Description |
|---|---|
| 💻 Responsive Design | Optimized for all screen sizes—from mobile to desktop. |
| 🗓️ Event Booking System | Users can book tables for upcoming events and game nights. |
| 🎲 Game Library | Browse the collection of board games available at the cafe. |
| 📸 Photo Gallery | Sneak peeks into the cafe's ambiance and game nights. |
| 📞 Contact Form | Easily get in touch with the cafe for any queries or feedback. |
| 🎉 Special Offers | Keep an eye out for exciting online deals and promotions! |
| Technology | Description |
|---|---|
| Frontend | JavaScript, React JS, Tailwind CSS |
| Backend | Node.js, Express.js |
| Database | MongoDB/MySQL |
| Deployment | Vercel |
Ready to contribute to this fun project? Here's how to set up your development environment:
Make sure you follow our contributing guidelines: here.
- Fork this repository 🍴 and clone it to your local machine:
git clone https://github.com/RamakrushnaBiswal/PlayCafe.git
- Install dependencies 🧩:
npm install
- Run the development server ⚡:
npm run dev
- Open your browser at http://localhost:3000 to see the project running! 🌟
Set up using Dockerfile (Make sure you have Docker installed):
- Build Docker Image
docker build -t playcafe . - Run Docker Image
docker run -p 5173:5173 -p 3000:3000 playcafe
- Open your browser at http://localhost:5173 to see the project running! 🌟
Once the application is running, you can:
- Navigate through the website to explore different sections.
- Book a table for an event.
- Contact us for inquiries.
The PlayCafe website communicates with a backend API to manage data. Here’s a brief overview of available API endpoints:
| HTTP Method | Endpoint | Description |
|---|---|---|
| GET | /api/games |
Fetches the list of available games. |
| POST | /api/bookings |
Books a table for an event. |
| GET | /api/events |
Retrieves upcoming events. |
| POST | /api/contact |
Sends a message through the contact form. |
| GET | /api/users |
Retrieves a list of registered users. |
| GET | /api/users/:id |
Fetches details of a specific user by ID. |
| PUT | /api/users/:id |
Updates user information based on user ID. |
| DELETE | /api/users/:id |
Deletes a user from the system by ID. |
| GET | /api/menus |
Retrieves the menu items available at PlayCafe. |
| POST | /api/orders |
Places a new order for food and beverages. |
| GET | /api/orders/:id |
Fetches details of a specific order by ID. |
| GET | /api/reviews |
Retrieves customer reviews for the cafe. |
| POST | /api/reviews |
Submits a new review for a game or event. |
| GET | /api/bookings/:id |
Retrieves details of a specific booking by ID. |
| DELETE | /api/bookings/:id |
Cancels a specific booking by ID. |
If you encounter issues while setting up or using the PlayCafe website, here are some common problems and solutions:
Solution: Make sure that you have Node.js installed. Run npm install again after confirming the Node.js installation.
Solution: Run npm start and ensure that the correct port is open. If the error persists, check for any error logs in the terminal and ensure no other applications are using the same port.
Solution: Verify that your database is running, and the connection details (host, username, password) are correct in the .env file.
Solution: Check if all static assets are being served correctly. Ensure that the paths to your CSS and JS files are correct and that they are being compiled if you're using a build tool like Webpack or Gulp.
Solution: Ensure the backend server has appropriate CORS policies configured to allow the frontend to communicate with it. If you're working with APIs, make sure that the necessary headers are included in server responses.
Solution: Double-check the .env file configuration. Ensure that all required variables are defined and that the file is correctly loaded by your server or build system.
- Use
console.logstatements to track the flow of the code. - Check browser developer tools for any front-end errors.
- Look into server logs for detailed error messages.
- Use Logging Libraries: Incorporate logging libraries like
winstonormorganfor better server-side error tracking. - Check Permissions: If you're running the server on a remote machine, ensure that you have the necessary permissions (e.g., read/write access to necessary directories).
- API Testing: Use tools like Postman or Insomnia to test API endpoints individually if issues arise in data fetching.
- Browser DevTools: Use Chrome DevTools (F12) or Firefox Developer Tools (F12) for debugging.
- React DevTools: Install React Developer Tools browser extension for component debugging.
- Network Tab: Monitor API calls and responses in the Network tab.
- Console Patterns: Use
console.table()for debugging arrays and objects.
- Node.js Documentation
- Express.js Guide
- Common npm errors
- How to Debug JavaScript Errors
- Troubleshooting Common CORS Issues
- Webpack Documentation
- React DevTools Guide
- React Error Boundaries
- React Performance Optimization
We love contributions! 💙 Whether you're a participant in GSSoC or an open-source enthusiast, we welcome your input. Here's how you can contribute:
- 📝 Create Issues: If you find any bugs or have feature suggestions, feel free to open an issue.
- 🔨 Submit Pull Requests: Got a fix or new feature? Fork the repo, create a new branch, and submit a pull request.
This project is part of GirlScript Summer of Code 2024 (GSSoC) Extended, an initiative to help aspiring developers get involved in the open-source community.
git clone https://github.com/<github_username>/PlayCafe.gitgit checkout -b feature/your-featuregit add .git commit -m "Add your descriptive commit message here"
git push origin feature/your-feature
Special thanks to our amazing mentors who are guiding this project! 🙌
- Shiva Bajpai: Full Stack Developer
GitHub Profile
Feel free to reach out for guidance and support throughout the development process!
We extend our heartfelt gratitude to all the amazing contributors who have made this project what it is today. Your efforts are driving PlayCafe to new heights! 🚀
Your support keeps us going! Here's how you can help:
- 💰 Sponsor us: Become a sponsor and help us keep growing. Become a Sponsor.
- ⭐ Star our Repo: Show some love by starring the repository. Your stars motivate us to continue developing and improving!
Thank you for supporting PlayCafe! 💖
This project is licensed under the MIT License. See the LICENSE file for more details.
We’d love to hear from you! Whether you have questions, feedback, or collaboration ideas, feel free to reach out.
- GitHub Issues: Submit a New Issue
Stay updated and engage with our community on social media:
We are always here to help you! Don’t hesitate to connect with us and be part of the PlayCafe journey.