akadotsh/image-app

Full Stack Photo Upload Application

Description

A Full stack Image Upload Application built with Nextjs and Golang

Table of Contents

• Full Stack Photo Upload Application
  • Description
  • Table of Contents
  • Live Application
  • 📖 Documentation
  • 🛠 Features
  • 🧱 Stack
    • Backend
    • Frontend
    • Database
  • Getting Started
  • Setup
    • Frontend
    • Backend
    • AWS S3
    • Backend Architecture and Deployment
    • Frontend Architecture
  • 🚀 Deployment

Live Application

• Frontend: https://image-app-614g.vercel.app/
• Backend: https://image-app-production.up.railway.app/

📖 Documentation

• Image Upload API Documentation

🛠 Features

• User authentication (signup/login)
• Image upload
• View all uploaded pictures
• Delete Picture

🧱 Stack

Backend

• Language: Golang
• Chi for creating HTTP Handlers
• gqlgen for creating GraphQL server in golang
• JWT for authentication
• AWS S3 for photo storage
• spectaql for generating documentation
• Mongodb driver

Frontend

• framework: Next.js(app router)
• Redux for state management
• Tanstack Query for asynchronous state management
• Tailwind CSS for styling
• Shadcn UI as UI Kit
• vitest for testing

Database

• Mongodb

Getting Started

Prerequisites:

• Node.js
• Go
• MongoDB
• AWS account with S3 bucket

Setup

Clone the repository:

git clone https://github.com/[YOUR_ACCOUNT]/image-app.git

Frontend

1. Navigate to the project directory: cd frontend
2. Install the dependencies: npm install
3. Start the server: npm run dev
4. Open your browser and navigate to http://localhost:3000

Backend

1. Navigate to the project directory: cd backend
2. Install the dependencies: go mod tidy
3. Copy the .env.example file to .env and update the environment variables as needed: cp .env.example .env
4. Start the server: go run main.go

AWS S3

1. Create an S3 bucket in your AWS account
2. Ensure your AWS credentials have the necessary permissions

Backend Architecture and Deployment

1. In the backend, I'm using Golang with Chi Router to create HTTP handlers and gqlgen for creating schema-based GraphQL APIs.

2. I'm using MongoDB to store data in the database from MongoDB Atlas and using the Go driver to interact with the database. I have not used any ORM because the setup is simpler and faster.

3. I have created a middleware called authMiddleware to access protected routes.

4. For deployment, I have created a Dockerfile and added instructions on how to build and run the app.

Frontend Architecture

1. The Frontend is built with:

   • Next.js
   • Tailwind CSS
   • Redux
   • TanStack Query
   • Shadcn UI

2. I'm using TanStack Query instead of Apollo Client because it offers a simpler setup and comes with developer tools, which greatly enhances the Developer Experience (DX).

3. For the UI Kit, I've utilized Shadcn UI due to its high customizability and lack of extra dependencies. With Shadcn UI, we only need to install the specific UI components we intend to use.

4. Note on Authentication: JWT tokens are stored in local storage. In a production environment, a more secure approach would be to store tokens in HTTP-only cookies to mitigate XSS risks.

🚀 Deployment

• The Frontend of the application is deployed on Vercel.
• The Backend of the application is deployed on Railway.