Disclaimer

the UI was specifically designed for mobile: so it either you use a mobile phone or turn on developer mode and set device preview on

Talkchat

link: https://talksay-interview-task2.vercel.app/

Talkchat, is a messaging platform as for now it is only a peer to peer thing. you can only message with other talkchatters (aka other registered users in the system)

This is a Next.js project bootstrapped with create-next-app.

Objective

At the end of the task here are the objectives

• Sign-in with google
• View all your previous conversations
• View messages in one conversation
• View my profile
• View other user profile
• Make everything realtime !!!

Technologies used

• Technologies used

  • Typescript For type safe incontractly to using Javasript
  • next react js server side rendering
  • React A free and open-source front-end JavaScript library for building user interfaces

• Networking

  • Firebase auth for authentication purposes - Google signin
  • Firebase firestore as my realtime database

• State-management

  • Mobx - react version of mobx

• UI

  • Lottie - for loader animations
  • React Icons - icons utility library
  • React Boostrap - bootstrap library for react applications
  • React Snap Carousel - a carousel ui library

• Test

  • TODO

Screenshots

I added some screenshots in the screenshots folder, in the root directory of the project. Added some GIFs to also show end to end test on the app

Getting Started

First, run the development server:

1. Clone the project

git clone https://github.com/iampato/Talksay-interview.git

2. Install dependecies

npm install 

3. setup environment variables

The project uses .env.local file to abstract firebase credentials from the client side. So create an .env.local file in the root project file stucture and a paste the following:

NEXT_PUBLIC_FIREBASE_API_KEY=< api key >
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=< auth domain >
NEXT_PUBLIC_FIREBASE_DATABASE_URL=< database url >
NEXT_PUBLIC_FIREBASE_PROJECT_ID=< project id >
NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=< storage bucket >
NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=< fcm sender id >
NEXT_PUBLIC_FIREBASE_APP_ID=< the app id >

replace the content starting with < and ending with > with credentials obtained from the firebase console.

4. Run the application

npm run dev

Open http://localhost:3000 with your browser to see the result.

Deployment on Vercel

The project has been deployed on Vercel and here is the link: talksay

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.