DevJobs app

🛠️ AVAILABLE LOCALLY ONLY FOR THE MOMENT 🛠️. The environment variables (test) for starting the project are given in the section with docker compose. If you have any problems, don't hesitate to open an issue or contact me directly 😊

If you want to run the project locally, use docker and a code editor, having first cloned the project.

Launching backend docker compose

🛑With docker compose, locally, the database is persisted but not made available on github. 🛑

To access the data in the database, you'll find a file called data.sql in the backend folder. To use it, start docker compose and connect to the Adminer service at http://localhost:8080/.

To connect to the database service, simply write these environment variables to a file named .env at the root of backend folder. These variables is dummy data. During the development phase, these variables will no longer be available.

MARIADB_ROOT_PASSWORD=example
MARIADB_USER=admin@devjobs
MARIADB_PASSWORD=secretpw
MARIADB_DATABASE=devjobs

Then you can run this command:

docker compose up

️👨‍🔧️ WARNING, it is possible that the backend service crashes on first execution with this message 👨‍🔧

️backend-1   | sqlalchemy.exc.OperationalError: (pymysql.err.OperationalError) (2003, "Can't connect to MySQL server on 'database' ([Errno 111] Connection refused)")

👨‍🔧If so, just restart the service from docker desktop. 👨‍🔧

Once all services are up and running, return to adminer and log in with MARIADB data. On the left, you'll see the “Import” action. All you have to do is select the sql file and your database is ready! 🥳

Launching frontend with vite

cd frontend
npm i
npm run dev

User stories

Your users should be able to:

• Be able to filter jobs on the index page by title, location, and whether a job is for a full-time position
• Be able to click a job from the index page so that they can read more information and apply for the job
• View the optimal layout for each page depending on their device's screen size
• See hover states for all interactive elements throughout the site
• Have the correct color scheme chosen for them based on their computer preferences
• Build this project as a full-stack application

Built with

• Semantic HTML5 markup
• TailwindCSS
• React-TS
• Storybook 7.x
• Chromatic
• Python 3.12 - Flask
• Docker 4.30

Authors

• Frontend - @amel-selmane
• Frontend/Backend/Docker - @CalcagnoLoic