Git Product home page Git Product logo

socialapp's Introduction

React Social App

React Logo TypeScript Logo TailwindCSS Logo Firebase Logo ASP.NET Logo

This is a social app written in React that allows users to upload and share posts, send friend requests, and chat on DM. The app uses various technologies including React, CSS, Firebase, MongoDb, Postgres, and Asp.NET WEB API.

Technologies Used

  • React
  • TailwindCSS
  • Firebase Auth
  • Postgres
  • Asp.NET WEB API
  • GetSreamIO

Before you run

Before you can run this project, you need to set up the following environment variables:

  1. VITE_RAPID_URL: The URL for the Rapid API service.
  2. VITE_RAPID_HOST: The host name for the Rapid API service.
  3. VITE_RAPID_KEY: Your API key for the Rapid API service.
  4. VITE_STREAM_KEY: The stream key for your application.
  5. VITE_API_DOMAIN: The domain for your API.

Follow these steps to set up the environment variables:

Using a .env File

  1. Create a file named .env in the root directory of the project.
  2. Open the .env file in a text editor.
VITE_RAPID_URL=your_rapid_url
VITE_RAPID_HOST=your_rapid_host
VITE_RAPID_KEY=your_rapid_key
VITE_STREAM_KEY=your_stream_key
VITE_API_DOMAIN=your_api_domain

Obtaining Required Environment Variables

To successfully set up the environment variables, you need to obtain specific values for each variable. Follow the instructions below to acquire them:

VITE_RAPID_URL, VITE_RAPID_HOST, VITE_RAPID_KEY

  1. Visit RapidAPI Documentation to create an account and log in.
  2. Follow the documentation to find the RapidAPI service you need for your project.
  3. Obtain the VITE_RAPID_URL, VITE_RAPID_HOST, and VITE_RAPID_KEY values provided by RapidAPI.

VITE_STREAM_KEY

  1. Go to GetStream and create an account or log in.
  2. Follow their documentation to create a new application.
  3. Obtain the VITE_STREAM_KEY from your GetStream application.

VITE_API_DOMAIN

  1. Clone the backend repository for your project by running the following command:
git clone https://github.com/Re1nGer/SocialAppBackend.git

Getting Started

To get started with this app, follow the instructions below:

Prerequisites

Make sure you have installed the following software on your machine:

  • Node.js
  • Git

Installing

  1. Clone this repository using Git:
    git clone https://github.com/your-username/your-repo.git
    
  2. Navigate to the project directory:
    cd your-repo
    
  3. Install dependencies:
    npm install
    
  4. Start the app:
    npm start
    
  5. Note you need to get NewsCatcherAPI to get Feed Page working correcrtly

The app should now be running on http://127.0.0.1:5173/ in your browser.

Features

  • Dalle II integtated for image generation
  • Rapid API for generating caption out of image
  • Google SignIn
  • Post Creating
  • Post liking and commenting
  • Friend requests
  • DM chat

Images

image

Contributing

If you are interested in contributing to this project, please fork the repository and submit a pull request. We welcome contributions of all types, including bug fixes, feature requests, and documentation improvements.

License

This project is licensed under the MIT License - see the LICENSE file for details.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.