devjobs-app

Devjobs board app build with 1) ReactTS/TailwindCSS and Vite for frontend and 2) Python/Flask and Docker for backend. ๐Ÿšง WIP : Only in local environment ๐Ÿšง

Stars
2
View Code on GitHub
Ecosystems: Docker, Docker Compose, Flask, Python, Storybook, Tailwind CSS, Vite

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