NativeChat

Table of contents:

1. Project overview
2. Technologies used
3. Installation and quickstart usage instructions
4. Project walkthrough

⭐ About

NativeChat is a web chat application which can break the translation barrier for you to focus on the conversation at hand🙂.

Features 🎇 -

• Authentication (username, password)
• Basic chat functionality (backend implemented)
• Integrated Postgresql database for storing conversations and messages (backend implemented)
• Translate any message to your language (to be implemented)
• Auto-translate feature for hassle free translation (to be implemented)

Go to top 👆🏻

💻 Tools and Tech used

Go to top 👆🏻

⚡ Quickstart

The project is a monorepo containing both the "frontend" and the "backend" code together.

Follow the steps below to work through the project:

Frontend -

1. Enter the frontend directory and install required packages

   cd frontend
   npm i
   

2. An environment variable(.env) for the server url named VITE_SERVER_BASE_URL can be customized.

   NOTE: Changes to the VITE_SERVER_BASE_URL variable must sync with the URL where your backend is running.

3. Start the development server locally using:

   npm run dev
   

4. You can generate a build for the project using:

   npm run build
   

Backend -

1. Enter the backend directory and install required packages

   cd backend
   npm i
   

2. The environment file(.env) requires a DATABASE_URL variable to be set for the Prisma ORM to work.

   NOTE: PostgreSQL database is being used for the project and must be setup beforehand.

   DATABASE_URL="postgresql://USER:PASSWORD@HOST:PORT/DATABASE"
   

   You can refer to this link for more information on Prisma setup with PostgreSQL.

   NOTE: Other variables such as PORT, CLIENT_URL, JWT_ACCESS_TOKEN_SECRET, JWT_REFRESH_TOKEN_SECRET, can be customized.
   
   Changes to PORT must be reflected in the VITE_SERVER_BASE_URL environment variable in the frontend
   
   Changes to CLIENT_URL must be in sync with the URL where your frontend is running

3. Sync your database with the Prisma schema using the following command:

   npx prisma db push
   

4. Run the development server locally using following command:

   npm run dev
   

5. To build the project, use following command:

   npm run build
   

6. To start the production server, use following command:

   npm start
   

   
   

Additional Info

A JSON file named thunder-collection_NativeChat backend.json is provided for the Backend endpoints testing using the VSCode Thunder Client extension. This file can be imported in the extension's tab to obtain the saved collections used for testing

Go to top 👆🏻

🎥 Project Walkthrough

To be made after project phase completed. Sorry to keep you waiting!

Go to top 👆🏻