React with Go Fullstack App (TO DO APP)

A complete fullstack application using Go (Golang) for the backend and React (with TypeScript) for the frontend, featuring MongoDB, TanStack Query, ChakraUI, and more.

Tech Stack

• Backend: Go (Golang)
• Frontend: React (TypeScript)
• Database: MongoDB
• State Management: TanStack Query
• UI Framework: ChakraUI
• Light & Dark Mode: ChakraUI color mode toggle
• Real-Time Data Fetching: TanStack Query (formerly React Query)
• Responsiveness: Fully responsive design for mobile, tablet, and desktop
• Deployment: Easy deployment to production

Features

• ✅ Create, Read, Update, Delete (CRUD) functionality for todos
• 🌙 Light and Dark mode for user interface
• 📱 Responsive design for various screen sizes
• 🔄 Real-time data fetching, caching, and updates with TanStack Query
• 🎨 Stylish UI components using ChakraUI

Getting Started

To get this app up and running locally, follow the steps below.

1. Clone the repository

git clone <your-repository-url>
cd <project-directory>

2. Set up the environment

Create a .env file at the root of the project (same level as main.go), and add the following:

MONGO_URI=<your_mongo_uri>
PORT=5000
ENV=development

3. Install Dependencies

For the backend (Go):

• Install Go dependencies:

go mod tidy
go run main.go

For the frontend (React):

• Install the React dependencies:

cd client
npm install
npm run dev

4. Docker

1. Dockerize Backend:

• Create a Dockerfile for the Go app.
• Build and run the Go container with:

docker build -t go-backend .
docker run -p 5000:5000 go-backend

2. Dockerize Frontend:

• Create a Dockerfile for the React app.
• Build and run the React container with:

docker build -t react-frontend .
docker run -p 5173:5173 react-frontend