- As a front-end dev, this project is a really good way to learn Firebase and ReactJS.
- Another reason is that I want to make a practical project.
Desktop screenshot:
- Source URL: See my source code
- Live Site URL: Visit my live site
- HTML
- CSS
- Typescript
- ReactJS + NextJS
- Firebase (version 9 - modular)
// Firebase: Subscribe to a collection
const userCollectionRef = collection(getFirestore(), "users");
unsubscribeFunction = onSnapshot(query(userCollectionRef, where("id", "==", searchText),
orderBy("id"),
limit(number_of_user)).withConverter(userTypeConverter), handleSnapshot
);If I were to continue working on this project, I would try to:
- Add an ability to block people.
- See the newest message from a friend or group.
- Order friends and groups by the newest message's date.
- A better way to connect to other people
- Offline cache.
- ReactJS - This helped me with basic concepts like custom hooks, context, and using hooks,...
- NextJS - This help me with basic layout of the project; basic NextJS elements like
<Image>,<Head>;... - Firebase - This helped me learn Firebase v9 and migrate Firebase v8 to v9 because most of the tutorial on Firebase is outdated.
- Firebase authentication in NextJS - This helped me a lot because I was stuck and don't know how to fix an error "auth user is null when got redirect". Turn out I just need to put the initializeApp from firebaseApp at the _app.tsx file
git clone https://github.com/Binh2/chat-app.git
yarn install or yarn
yarn dev
- Frontend Mentor - @Binh2
- Twitter - @hgqbinh2002
- LinkedIn - hgqbinh2002
- Source URL: See my source code
- Live Site URL: Visit my live site
- The source code: Checkout my source code
- Live Site URL: My live webpage
- Solution URL: My GitHub multi-step-form repo
- Live Site URL: Visit my live site
- Big thanks to this webpage 45 React projects order from easy to hard for giving me the idea to make this project
- Big thanks to myself for completing this project (pretty lonely, yes)