Cabaigne is a web application developed with “PERN” stack technologies, that offers tourists and local beachgoers informations related to beaches in Tunisia 
We provide a list of Amenities , Real time sea state (Calm, moderate or Agitated) and current weather report.
The purpose behind developing our application is to give tourists and locals a service for finding their perfect beach and therefore promote Tunisian spots and support tourism industry.
- Express js web framework.
- Postgresql.
- Sequelize ORM.
- JWT (JSON Web Tokens).
View the complete list of Back-End dependencies in the corresponding package.json
| Tool/Library | Version |
|---|---|
| Express js | ^4.18.1 |
| Sequelize | ^6.21.3 |
| node-postgres | ^8.7.3 |
| JSON web token | ^8.5.1 |
| Nodemon | ^4.18.1 |
| Supertest | ^1.0.0 |
| Jest | ^3.0.0 |
/api/v1/beach/allbeaches: Extract all beaches with corresponding posts(eager loading) from database./api/v1/posts/allposts: Extract all posts with corresponding user(eager loading) from database./api/v1/beach/newbeach: Add new beach to database(only accessible by admins)./api/v1/uploads/azureblopuploaduser: Add azure image url to the corresponding user row./api/v1/uploads/azureblopuploadbeach: Add azure beach image url to the corresponding beach row./api/v1/user/allpinnedbeaches/:id: Extract all beaches pinned by:id(id corresponds to user)./api/v1/auth/login: Verify user creds and return a signed jwt token.
- React JS library
- Webpack for bundling all the javascript files
- Babel for javascript compatibilty between all browsers
- Tailwind & Bootstrap for styling
- Axios for making requests to APIs (server and third parties).
View the complete list of Front-End dependencies in the corresponding package.json
| Tool/Library | Version |
|---|---|
| react | ^18.2.0 |
| react-router-dom | ^6.3.0 |
| swiper | ^8.3.2 |
| jwt-decode | ^3.1.2 |
| @azure/storage-blob | ^12.11.0 |
| @emailjs/browser | ^3.6.2 |
| axios | ^0.27.2 |
| webpack | ^5.74.0 |
| tailwindcss | ^3.1.8 |
/login: a basic login page created with tailwind/signup: basic signup page (email, username, password) signups/profile: Profile modification page (update user data data and upload profile image)/newbeach: page to add new beach (only accessible by admin users).
github actions: For our CI/CD pipeline we doad on two servers. One server will handle all the application processes - web interface and the Database server will handle all the database queries.
find Back-end tests workflow here workflows. find Deployment workflow here workflows.
Azure blobstorage container: Our first option was to store all images on the filesystem but as we rebuild the docker images on each changes we decided to use azure blob storage to keep the data in separate place. It was a better choice as it separates the storage from the main server and by that ort data will be secure in cases the server crashes or data gets lost.
Azure PostgreSQL instance: With the same mindset of separating the code from data, we decided to spin up a dedicated azure postgreSQL instance and link it to our main server. Doing this will distribute the load on two servers. One server will handle all the application processes - web interface and the Database server will handle all the database queries.
Nginx: As react built-in server is not suitable for production apps we use nginx web server. Nginx will manage all the requests and will pass it to the application server that is connected to a database server.
Docker: Docker containers holds dependencies and libraries that our application needs. therefore eliminate the need of installing dependencies manually. we were also able to create a separate development and production environments. In the development environment we created a container for the Front-End, another for Back-End and the last one for postgreSQL while we only need the first 2 containers in the production and add nginx service to the Front-End. view our docker-compose production file docker-compose development file.
Make sure to have docker installed on your system
- Clone the repository
- run
docker-compose -f docker-compose.dev.yml up --build - access
http://localhost:3010to interact with the applicationlocalhost:3001for the API andlocalhost:5432for the database.
Do not use any real informations like Email adresses, Passwords, etc because the app is still under development and lacks security testing.