Journey of Creating Uniport, a single port where users can seamlessly access and utilize various AI functionalities

Visit the website Uniport and seamlessly access various AI tools at one place!

📋 Table of Contents

1. 🤖 Introduction
2. ⚙️ Tech Stack
3. 🔋 Features
4. 🤸 Quick Start
5. 🕸️ Details

🤖 Introduction

This Next JS full Stack application is my university project work that I with my teammates accomplished in sixth semester of my degree of Bachelor of Technology. Uniport serves as a single port where users can seamlessly access and utilize different AI functionalities to enhance their workflows and creative endeavors, hence the name Uniport.

The project leverages cutting-edge technologies such as Next.js 14 for both backend and frontend development, React for dynamic user interfaces, Tailwind CSS for sleek and responsive design, and Prisma for seamless connectivity with a MySQL database hosted on Aiven.

⚙️ Tech Stack

• Next.JS 14
• Typescript
• MySQL database with Prisma
• Clerk Authentication
• Tailwind CSS , Aceternity UI

🔋 Features

👉 Clerk Authentication System

• Implement Clerk authentication system for secure user authentication.
• Allow users to sign in using their Google accounts.

👉 Sidebar and Navigation

• Develop a sidebar component to facilitate navigation between different sections of the application.

👉 Dashboard UI

• Present users with a glimpse of each AI tool's functionality and purpose.

👉 AI Tools UI and Functionality

• Implemented functionality for each AI tool, such as conversation, image generation, music composition, video generation, code generation and Google Gemini.
• Ensure seamless integration with APIs from Gemini, OpenAI and Replicate AI for generating responses based on user input.

👉 API Limit Tracking

• Display API usage statistics and inform users about their remaining free trials.

👉 Pro Access and Payment Integration

• Integrate Stripe payment system to enable users to subscribe for unlimited access to AI tools.

👉 Customer Support Chatbot Integration

• Incorporated Crisp chatbot service to provide users with customer support and assistance.

👉 Landing Page for Uniport

• A simple landing page, created using Aceternity UI where the user can get an introduction about the application.
• Users can create their account on Uniport by visiting the Landing page.

The list continues with addition of new AI tools that are roaring in the market as we explore this super responsive application.

Want to add an AI to Uniport? Feel free to contribute to this open source project by following the quick start guide below.

🤸 Quick Start

Follow these steps to set up the project locally on your machine.

Prerequisites

Make sure you have the following installed on your machine:

• Git
• Node.js
• npm (Node Package Manager)

Cloning the Repository

git clone https://github.com/iAryanK/Uniport.git
cd Uniport

Installation

Install the project dependencies using npm:

npm install

Set Up Environment Variables

Create a new file named .env in the root of your project and add the following content:

NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=
CLERK_SECRET_KEY=

NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in
NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up
NEXT_PUBLIC_CLERK_AFTER_SIGN_IN_URL=/dashboard
NEXT_PUBLIC_CLERK_AFTER_SIGN_UP_URL=/dashboard

OPENAI_API_KEY=
GEMINI_API_KEY=
REPLICATE_API_TOKEN=

DATABASE_URL=

NEXT_PUBLIC_APP_URL=

STRIPE_WEBHOOK_SECRET=
STRIPE_API_KEY=

Replace the placeholder values with your actual credentials. You can obtain these credentials by signing up on these corresponding websites from Clerk, OpenAI, Gemini, Replicate, Aiven and Stripe.

Running the Project

npm run dev

Open http://localhost:3000 in your browser to view the project.

🕸️ Details

😀 Typescript for type safety
😀 simplifies development process
😀 optimizes web applications
😀 Server side and client side rendering
😀 Inbuilt Search Engine Optimization
😀 File and folder based routing
😀 FullStack application creating capability
😀 Automatic code splitting

And at the end of the day, it is just an extention of ReactJs.😀

Following are the concepts of NextJS used in Uniport-
➡️ File and Folder based routing
➡️ Client and server components
➡️ Routing and special NextJS files
➡️ Data fetching Strategies
➡️ NextJs Server Actions
➡️ Static and Dynamic Metadata

In addition to these, I used
➡️ MySQL, a relational database
➡️ zod validations
➡️ zustand for global context
➡️ concept of webhooks