A full-stack mini microblogging platform built with Next.js, React, TypeScript, MongoDB, and Prisma.
The application allows users to create accounts, customize their profiles, publish posts, follow other users, and interact with content through likes.
- Account creation and authentication
- Unique usernames
@usernamehandles- Profile pictures
- User profiles
- Create and publish posts
- Browse posts through a social feed
- User-specific posts
- Persistent post data
- Follow and unfollow users
- Like posts
- View user profiles
- Personalized social interactions
- Responsive interface
- Reusable React components
- Interactive post and profile interfaces
- Next.js
- React
- TypeScript
- Tailwind CSS
- Next.js API Routes
- Prisma ORM
- MongoDB
- NextAuth.js
The application uses Next.js as a full-stack framework.
The frontend communicates with server-side API routes, which handle authentication, user operations, posts, likes, follows, and database interactions.
┌─────────────────────┐
│ Next.js │
│ React + TypeScript │
└──────────┬──────────┘
│
▼
┌─────────────────────┐
│ API Routes │
│ │
│ Users │
│ Posts │
│ Likes │
│ Follows │
│ Authentication │
└──────────┬──────────┘
│
▼
┌─────────────────────┐
│ Prisma │
│ ORM │
└──────────┬──────────┘
│
▼
┌─────────────────────┐
│ MongoDB │
│ │
│ Users / Posts / │
│ Likes / Follows │
└─────────────────────┘
Users can create accounts and authenticate into the application.
Each account has a unique username and @username handle, allowing users to be identified throughout the platform.
Users can also configure a profile picture and maintain their own profile.
Authenticated users can create and publish posts.
Posts are persisted in MongoDB and displayed through the application's social feed.
Users can interact with posts by liking them.
Like relationships are stored persistently so that user interactions remain associated with their accounts.
Users can follow and unfollow other users.
The follow system establishes relationships between users and provides the foundation for a social graph within the application.
Each user has a dedicated profile containing their username, handle, profile picture, and posts.
Users can browse other profiles and interact with them through the follow system.
MongoDB is used for persistent application data.
Prisma provides a structured interface for interacting with the database and managing relationships between users, posts, likes, and follows.
The application's data model supports relationships such as:
User
├── Posts
├── Likes
├── Followers
├── Following
└── Profile
eks/
├── components/
├── hooks/
├── libs/
├── pages/
│ └── api/
├── prisma/
├── public/
├── styles/
├── middleware.ts
├── next.config.js
├── package.json
└── tsconfig.json
- Node.js
- MongoDB database
Clone the repository:
git clone https://github.com/imminent-byte/EKS.git
cd EKS
Install dependencies:
npm install
Create a .env file and configure the required environment variables.
Example:
DATABASE_URL=
NEXTAUTH_SECRET=
NEXTAUTH_URL=http://localhost:3000
Generate the Prisma client:
npx prisma generate
Start the development server:
npm run dev
Open:
http://localhost:3000
This project was built as a hands-on exercise in developing a complete social web application.
It provided practical experience connecting a frontend interface with backend API routes, authentication, database persistence, and user-to-user interactions.