Skip to content

Latest commit

 

History

History
305 lines (227 loc) · 6.79 KB

README.md

File metadata and controls

305 lines (227 loc) · 6.79 KB
Raw

📝 Golang Todo Application

Go React MongoDB Railway Vite

A modern, full-stack todo application built with Go (Fiber) + React + MongoDB

Features • Installation • Documentation • Contributing

Todo App Demo

🚀 Tech Stack

Backend

  • 🔷 Go
  • 🚅 Fiber (Web Framework)
  • 🍃 MongoDB

Frontend

  • ⚛️ React
  • ⚡ Vite

🏗️ Architecture 

graph TD
    subgraph Client["Frontend Client"]
        UI[React UI]
    end

    subgraph Server["Go Fiber Server (main.go)"]
        Main[Main Function]
        ENV[Load Environment]
        DB[MongoDB Connection]
        Router[Fiber Router]
        
        subgraph Endpoints["API Endpoints"]
            GET[GET /api/todos]
            POST[POST /api/todos]
            PATCH[PATCH /api/todos/:id]
            DELETE[DELETE /api/todos/:id]
        end
        
        subgraph Handlers["Handler Functions"]
            getTodos
            createTodo
            updateTodo
            deleteTodo
        end
    end

    subgraph Database["MongoDB Atlas"]
        Collection["Collection: todos</br>Database: golang_db"]
    end

    %% Main Application Flow
    Main --> ENV
    ENV --> DB
    Main --> Router
    Router --> Endpoints

    %% Connect Endpoints to Handlers
    GET --> getTodos
    POST --> createTodo
    PATCH --> updateTodo
    DELETE --> deleteTodo

    %% Connect Handlers to Database
    getTodos --> Collection
    createTodo --> Collection
    updateTodo --> Collection
    deleteTodo --> Collection

    %% Client Interaction
    UI <--> GET
    UI <--> POST
    UI <--> PATCH
    UI <--> DELETE

    %% Styling
    classDef server fill:#f9f,stroke:#333,stroke-width:2px
    classDef database fill:#b5d8ff,stroke:#333,stroke-width:2px
    classDef client fill:#baffc9,stroke:#333,stroke-width:2px
    classDef endpoint fill:#fff5ba,stroke:#333,stroke-width:2px
    
    class Server server
    class Database database
    class Client client
    class GET,POST,PATCH,DELETE endpoint
Loading

✨ Features

  • 📱 Responsive Design
  • 🔄 Real-time Updates
  • 🎯 Task Management
  • ✅ Mark Tasks Complete
  • 🗑️ Delete Tasks
  • 💾 Persistent Storage

🛠️ Prerequisites

Before you begin, ensure you have the following installed:

  • 🔷 Go (version 1.16 or later)
  • 💻 Node.js (version 14 or later)
  • 🍃 MongoDB Atlas Account or Local MongoDB
  • 📦 Git

🌟 Installation & Setup

1️⃣ Clone the Repository

git clone https://github.com/vigneshs-dev/golang-to-do-app.git
cd golang-to-do-app

2️⃣ Backend Setup

Install Go Dependencies

go mod download

Environment Variables

Create a .env file in the root directory:

MONGODB_URI=your_mongodb_connection_string
PORT=5000
ENV=development

Replace your_mongodb_connection_string with your MongoDB Atlas connection string or local MongoDB URL.

Run the Backend

go run main.go

The server will start on http://localhost:5000

3️⃣ Frontend Setup

Navigate to the client directory:

cd client

Install dependencies:

npm install

Create a .env file in the client directory:

VITE_API_URL=http://localhost:5000/api

Start the development server:

npm run dev

The frontend will start on http://localhost:5173

📁 Project Structure

project-root/
├── 📜 main.go                 # Main backend server file
├── 📦 go.mod                  # Go modules file
├── 📋 go.sum                  # Go modules checksum
├── 🔒 .env                    # Backend environment variables
├── 📁 client/                 # Frontend React application
│   ├── 📁 src/
│   ├── 📦 package.json
│   ├── 🔒 .env               # Frontend environment variables
│   └── ...
└── 📖 README.md

🔌 API Endpoints

Todo Routes

Method Endpoint Description
GET /api/todos Get all todos
POST /api/todos Create a new todo
PATCH /api/todos/:id Update todo status
DELETE /api/todos/:id Delete a todo

💻 Development

Running in Development Mode

  1. Start the backend server:
go run main.go
  1. In a separate terminal, start the frontend development server:
cd client
npm run dev

Building for Production

  1. Build the frontend:
cd client
npm run build
  1. Build the backend:
go build -o app

🚂 Deployment

The application is deployed on Railway.app. For local development, follow the installation steps above.

Environment Variables Required for Deployment

Variable Description
MONGODB_URI MongoDB connection string
PORT Application port
ENV Set to "production"

❗ Common Issues & Solutions

Backend Issues

  1. 🔴 MongoDB Connection Failed

    • Check if your MongoDB URI is correct
    • Ensure your IP address is whitelisted in MongoDB Atlas
    • Verify network connectivity

  2. 🔴 Port Already in Use

    • Change the port in .env file
    • Check if another process is using the same port

Frontend Issues

  1. 🔴 API Calls Failed

    • Verify the VITE_API_URL in frontend .env file
    • Check if the backend server is running
    • Verify CORS settings in the backend

  2. 🔴 Build Failures

    • Clear npm cache: npm cache clean --force
    • Delete node_modules and reinstall: 
      rm -rf node_modules
npm install

🤝 Contributing

  1. Fork the repository
  2. Create your feature branch (git checkout -b feature/AmazingFeature)
  3. Commit your changes (git commit -m 'Add some AmazingFeature')
  4. Push to the branch (git push origin feature/AmazingFeature)
  5. Open a Pull Request

📝 License

This project is licensed under the MIT License - see the LICENSE file for details

Made with ❤️ by VigneshS

⭐ Star this repository if you found it helpful!