Full Stack Restaurant CRUD Application with Go, Gin, React, and MongoDB

Created by : Raymond Akkasel - August, 2023

Description:

Web Application to manage restaurant orders. This applications is built with Go as Backend, React as Frontend, and MongoDB as the database. I use Postman to test backend API that I have made with Go.

Technologies Used:

1. Backend: Go (with Gin Framework)
   • Efficient handling of HTTP requests
   • Middleware support for authentication, logging, etc.
   • Robust routing capabilities
2. Frontend: React
   • Dynamic and responsive user interface
   • Component-based architecture for maintainability and scalability
   • Integration with real-time updates for order status
3. Database: MongoDB
   • Schema-less NoSQL database for flexibility
   • Efficient querying and indexing
   • Reliable data persistence
4. Other Tools : Postman
   • to test the Backend CRUD [ Create, Read, Update, Delete ] API ( POST / GET / PUT / DELETE )

Features:

• Add new Order
• Update Order
• Update / Change Waiter
• Delete Order

Process:

1. Setting up the database

   • Open up MongoDB website
   • Build new database
   • Create Cluster
   • Connect

2. Backend

   I use Go as my backend web server and built an API with basic CRUD (Create, Read, Update, Delete) functionality that my frontend application can interact with. I use Gin Framework.

   

   After that, I use Postman to test all of the backend API that I have built (POST / GET / PUT / DELETE)

   

3. Frontend

   • create-react-app frontend
   • install axios
   • install react-bootstrap@next [email protected] (for UI styling)
   • use axios to handle requests to the server
   • create components for the app (list of orders, change order, change waiter, delete order)

Challenges and Solutions:

1. Familiarity with the technologies and tools:
   • Challenge: Being my first full-stack project with Gin Framework, understanding how to work with Gin Framework for building the web API was challenging.
   • Solution: I dedicated time to thorough research, tutorials, and hands-on coding exercises. Reading documentation, and constant trial and error helped me to grasp the core concepts. I was able to apply these learnings to create a robust and scalable backend.
2. Integration between Go, React, and MongoDB:
   • Challenge: Integrating the various technologies and ensuring that they work seamlessly together presented its unique set of problems. Managing the data flow between the frontend, backend, and database was challenging.
   • Solution: By breaking down the problem into smaller tasks and researching each specific integration point, I was able to piece together the entire system. Utilizing libraries and frameworks that facilitate integration also proved valuable.
3. Testing and Debugging:
   • Challenge: Building a comprehensive testing strategy for a full-stack application using technologies I was unfamiliar with was intricate.
   • Solution: I utilized Go's native testing tools to write tests. Debugging was approached methodically, using both automated tools and manual examination.

Results/Outcomes:

1. Skill Enhancement: Successfully completing this project allowed me to acquire a solid understanding of Go, Gin Framework, React, and MongoDB. It has broadened my skill set and made me more adaptable to various technologies.
2. A Comprehensive Solution: This restaurant WebApp has become a versatile tool that can be adapted to various restaurant models. It demonstrates my ability to manage complex projects and deliver solutions that cater to real-world needs.
3. Opportunities for Growth: With this foundational experience, I'm now prepared to take on more complex projects, explore further enhancements to the system, and possibly contribute to the Go community.

Screenshots or Demo:

Backend API:

Frontend: