Messenger application, based on firebase technologies: database and storage. Application configuration of firebase provides real time watching and observing on changes in database's collections.
Authentication is implemented using firebase tools: login via email / password and login via Google Account.
Check production build of application by following the link.
Firebase Authentication
Firebase Storage
Firestore Database
React
React Router
Redux Toolkit
Sass
GitHub Actions
Docker
Vercel
- Vite as building tool
- Eslint + Prettier for code style
- Framer as beautiful animations source
- husky for github hooks
- Redux error slice, watched for rejected actions and working as error boundary widget
- Firebase typization using types converter util
- Firebase errors parser for most popular asynchronous errors
- Form validation implemented with redux store logic
- React custom hooks, controlling specific events as scrolling and debounce
- Infinite scroll for messages history
- Responsive design with media queries
Attention !
Before running app locally, make sure that you created .env or .env.local file with your firebase configuration environment. That file must have this structure:
VITE_FIREBASE_API_KEY
=[YOUR FIREBASE API_KEY]
VITE_FIREBASE_AUTH_DOMAIN
=[YOUR FIREBASE AUTH_DOMAIN]
VITE_FIREBASE_PROJECT_ID
=[YOUR FIREBASE PROJECT_ID]
VITE_FIREBASE_STORAGE_BUCKET
=[YOUR FIREBASE STORAGE_BUCKET]
VITE_FIREBASE_MESSAGING_SENDER_ID
=[YOUR FIREBASE MESSAGING_SENDER_ID]
VITE_FIREBASE_APP_ID
=[YOUR FIREBASE APP_ID]
Using GitHub repository code
Clone the GitHub repository using https / ssh / Github CLI.
Install Node.js from official download page.
Open folder with the cloned GitHub code using your IDE and write next commands on your terminal: yarn install
and then yarn dev
. Alternatively you may build application by next commands chain: yarn build
and then yarn preview
.
Using DockerHub
Clone docker image from DockerHub using docker with git pull mwshdp/messenger
command.
Next step run container by the command according to your preferences or just use: docker run -d -p 4173:4173 --rm --name messenger mwshdp/messenger
. As you may noticed the port for connecting is localhost:4173.
You also may use make commands with Makefile in the root folder. First of course make sure that make util is installed on your computer. For example, to run docker container you may use make run
command with a pre-configured docker command.
If you want to build new docker image with your firebase configuration, check the Makefile at the root folder and pick the build command. However, be aware that this command is suitable for Windows OS. If you want to build an image using a UNIX, check out for command with special env saving variables syntax.