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
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
.
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
- 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
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
First, run the development server:
- Clone the project
git clone https://github.com/iampato/Talksay-interview.git
- Install dependecies
npm install
- 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.
- Run the application
npm run dev
Open http://localhost:3000 with your browser to see the result.
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.