Comms
Full Stack Chat Application made using NextJS, Chakra UI, SCSS, and Firebase.
Overview:
"Comms" is a full-stack chat application built using the NextJS framework. The user interface is created using Chakra UI and styled using SCSS. It utilizes Google OAuth authentication from Firebase for secure communication and stores all chat data in Firestore. The application aims to serve as a learning project to explore frontend tech stacks and frameworks. It is hosted on Vercel.
Features:
- Full-stack chat application built using NextJS
- User interface designed using Chakra UI
- Stylings handled by SCSS
- Secure communication through Google OAuth authentication
- Chat data stored in Firestore
- Persistent data even after refreshing or signing out
- Real-time communication between users
- Easy sign out functionality
Summary:
"Comms" is a full-stack chat application built with NextJS, Chakra UI, and SCSS. It provides secure communication through Google OAuth authentication and stores all chat data in Firestore. The app allows real-time communication between users and ensures data persistence. It serves as a learning project to explore frontend technologies and frameworks. Contributions and feedback are welcomed.
- Next.js
Next.js is a React-based web framework that enables server-side rendering, static site generation, and other powerful features for building modern web applications.
- React
React is a widely used JavaScript library for building user interfaces and single-page applications. It follows a component-based architecture and uses a virtual DOM to efficiently update and render UI components
- SCSS
SCSS is a preprocessor scripting language that extends the capabilities of CSS by adding features such as variables, nesting, and mixins. It allows developers to write more efficient and maintainable CSS code, and helps to streamline the development process by reducing repetition and increasing reusability.
- Chakra UI
Chakra UI is a popular open-source React component library that provides a set of accessible and customizable UI components to help developers create modern web applications.
- Firebase
Firebase offers a comprehensive set of features, including real-time database, authentication, hosting, cloud functions, storage, and more. Firebase provides an easy-to-use interface and allows developers to focus on building features rather than managing infrastructure.
- Eslint
ESLint is a linter for JavaScript that analyzes code to detect and report on potential problems and errors, as well as enforce consistent code style and best practices, helping developers to write cleaner, more maintainable code.
- Framer Motion
Alpine.js is a lightweight JavaScript framework that simplifies the process of creating dynamic, reactive user interfaces on the web. It uses a declarative syntax that offers a higher level of abstraction compared to vanilla JavaScript, while being more performant and easier to use than jQuery.