TweetX

Implemented a social media web application where users can connect and share thoughts amongst each other.

Note: Visit react-tweetx-backend to install and setup the backend API for this repository.

Live Demo

TweetX.Demo.mp4

Features

• Secured Authentication
• Forgot password
• CRUD functionality (for tweets)
• Connecting Users (follow/ unfollow another user)
• Searching Users (to connect or view their profile)
• Bookmark (help users to bookmark tweets of their choice)
• Like & dislike functionality (for tweets)

Tech Stack

• React / TailwindCSS
• React hook form
• Redux Toolkit

Installation

1. Clone the repository: git clone https://github.com/ranepaarth/react-assignment-tweetx.git
2. Navigate to the project directory: cd react-assignment-tweetx
3. Install the dependencies: npm install

Environment Variables

Add a .env file in the root directory and follow

# To prevent accidentally leaking env variables to the client, only variables prefixed with VITE_ are exposed to your Vite-processed code.

# For development http://localhost:3000
# After deployment this will cahnge to your domain: e.g. https://example.com
VITE_API_URL

Usage

1. Start development server npm run dev
2. Open your Browser and visit http://localhost:5173 to view the website

Concepts covered

• Configure store and create API slices
• State management with redux-toolkit
• Custom hooks
• Prefetching with redux-toolkit
• Form field validation using react-hook-form

Deploy on Vercel

Create a vercel.json file in the root of the project. Add the below lines of code inside your vercel.json file to configure your website for vercel deployment.

{
  "rewrites": [
    {
      "source": "/(.*)",
      "destination": "/"
    }
  ]
}

Check out our Vite on Vercel for more details.