A set out create a social media app using toolsets from MERN, an Instagram but with powerful models like DALL-E, etc. Where only limit is your creative imagination.
Since the AI boom on the internet has been trending and creating new ways to unlock powerful technologies, I always wanted to create an app that utilizes the powerful models provided by one of the leading techs in AI, OpenAI. Hence, here it goes SocialAI, an image-sharing social media app. Imagine Instagram with all its features combined with the wonders of AI models that enable users to unlock or work as catalysts adding a creative curve to their social existence.
The project was created using my favorite framework for React - NextJs with TypeScript as its principal language, for creating UI components and structurize backend for API calls. Cloudinary, a media management to store generated images shared by the user. The UI was created using TailwindCSS and plugins from npm (Node Package Manager). For form validation and submissions, react-hook-form is used. The entire state is centralized with redux-toolkit, async thunks for asynchronous API calls, and state management. A custom hook like useDebounce to limit the overflow of API calls was created to enable the search feature of other images shared in the community of the app.
- Home page as images shared by other users
- Create post for generating image from prompt
- Download button for save images
This project was built using NextJs, Redux, TailwindCSS, HTML, JavaScript, Rest API, Node JS, MongoDB.
- NPM
- Node JS
- MongoDB
The project repository can be found in GitHub link or just clone the project using this command.
Using HTTPS
# git clone https://github.com/zuhedshaikh95/openai-social.git
- Open terminal on your workspace with
cd /home/workspace/openai-social
Install NPM
Check that you have node and npm installed
To check if you have Node.js installed, run this command in your terminal:
node -v
To confirm that you have npm installed you can run this command in your terminal:
npm -v
To confirm that you have MongoDB installed you can run this command in your terminal:
mongo -v
To install all the dependences of the project, run the following command:
To run the application, run the following command:
npm run dev
To run this project, you will need to add the following environment variables to your .env file and create a unsigned preset at cloudnary dashboard and a folder named 'SocialAI'
MONGODB_URI
e.g. mongodb cluster URI
OPENAI_API_KEY
e.g. Secret key OpenAI
CLOUDINARY_CLOUD_NAME
e.g. Cloud name
CLOUDINARY_API_KEY
e.g. Cloud API key
CLOUDINARY_API_SECRET
e.g. Cloud API secret
- Visual Studio Code
- NextJs template
- MongoDB compass
© 2023 Zuhed Shaikh
Give a ⭐️ if you like this project!
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent