Welcome to the exciting world of web development! In this guide, we will dive into building a Reddit clone using the powerful combination of Next.js, Firebase v9, Chakra UI, TypeScript, and Recoil. This project includes features like image uploading, Google authentication, user community management (create, join, leave), and the ability to upvote/downvote posts, along with dark/light mode support, and data encryption/decryption!

Table of Contents

• About the Project
• Screenshots
• Tech Stack
• Prerequisites
• Installation
• Run Locally
• Deployment
• Contact

About the Project

This Reddit clone serves as a functional and visually appealing platform for users to engage in discussions, share content, and create communities.

Screenshots

Below are some screenshots showcasing key features of the Reddit clone:

Create Community & User Interaction

Dark Mode & Light Mode

User Profile Section

Conversation Section

Tech Stack

This project leverages some of the most modern web technologies:

• TypeScript
• Next.js
• React.js
• Chakra UI
• Firebase

Prerequisites

• Sign up for a Firebase account HERE
• Install Node.js on your computer HERE

Installation

Please follow the installation steps below to set up your environment:

npx create-next-app@latest --ts my-project

cd my-project

npm install

Once you have set up your Next.js project, install Chakra UI:

npm i @chakra-ui/react @emotion/react @emotion/styled framer-motion

Run Locally

To test your application locally, you need to clone the project repository and start the server:

git clone https://github.com/SashenJayathilaka/Reddit-Clone.git

cd Reddit-Clone

npm install

npm run dev

Open http://localhost:3000 in your browser to see your Reddit Clone in action!

Deployment

To deploy your project, the easiest way is to use the Vercel platform. You can find more details on their deployment documentation.

Contact

If you have any questions or need support, feel free to reach out:

Sashen – @twitter_handle – sashenjayathilaka95@gmail.com

Project Link: GitHub Repository

Troubleshooting

If you run into issues while setting up or running the application, consider these troubleshooting tips:

• Make sure all your environment variables are properly set in the .env file.
• Check if the dependencies are correctly installed by re-running npm install.
• If there’s a problem with Firebase authentication, ensure you have set up your Firebase project correctly.

For more insights, updates, or to collaborate on AI development projects, stay connected with fxis.ai.

At fxis.ai, we believe that such advancements are crucial for the future of AI, as they enable more comprehensive and effective solutions. Our team is continually exploring new methodologies to push the envelope in artificial intelligence, ensuring that our clients benefit from the latest technological innovations.