OpenDex

Open Source student project. Small Pokédex in the form of a website

About the Project

OpenDex is a student project which aims to discover OpenSource development through various elements such as the Readme, the license, templates (issues/pull requests) etc...

Here, we've decided to create a small web application using React for the frontend and Express for the Api. This web application represents a pokedex, and the user can add a pokemon, modify his pokedex...

Summary

How To Install the Project
Languages and Technologies
- Front-End
- Back-End
- Database
- Docker
Run
Architecture
License
Authors

How To Install the Project

Firstly, it all depends on whether you intend to use the various components via Docker containers.

See below for your preferred option.

Before any install, you need to clone the project

git clone https://github.com/chatelet69/OpenDex.git
or via SSH
git clone git@github.com:chatelet69/OpenDex.git

Docker Container

A docker-compose file is present at the root of the directory, containing 3 services: the api, the front end and the database. For the API, a Dockerfile is also present to provide the image for building the api.

To start containers you can run :

docker compose up --build

The --build option is used to build the api service with its Dockerfile, you can remove it if you don't need it

Check that containers have been successfully booted

docker ps

The website should normally be accessible at http://localhost:3000 and the api at http://localhost:3001 (Or the port you specified)

On your machine (without docker)

First, you need to install the dependencies, then you can use the "start" script with npm at the root of the directory
Of course, don't forget to replace the .env file in /api with the configuration information for your database.

npm install
Each part need dependencies
npm run install_libs
npm start

You can also manually launch the api and the front end separately by executing the following command in each folder /api and /opendex_front

npm start

Build the React Frontend App

In /opendex_front

npm run build

You will have a build folder which is the static site built by React. This static build therefore doesn't need to have the node server running.

The node server for the React application enables the development application to be launched, and it is this application that receives hot updates from React. (See https://webpack.js.org/guides/hot-module-replacement/)

Languages and Technologies

Front-End

Back-End

Database

Containerization

Run

Required

Docker installation with docker compose

Commands for developping

** Run for the first time ** docker compose up

Architecture

├── api
│ ├── index.ts
│ ├── .env
│ ├── src
│ │ ├── middlewares
│ │ ├── routes
│ │ ├── controllers
│ │ ├── repositories
│ │ └── services
│ ├── package.json
│ └── tsconfig.json
|
├── opendex_front
│ ├── package.json
│ ├── .gitignore
│ ├── src
│ │ ├── App.js
│ │ ├── index.js
│ │ ├── pages
│ │ ├── css
│ │ └── assets
│ ├── public
│ │ ├── index.html
│ │ ├── favicon.ico
│ │ ├── manifest.json
│ │ ├── robots.txt
│ │ └── logo192.png
│ └── build
|
|—— docker-compose.yml
|—— package.json
|—— SECURITY.md
|—— LICENSE

License

This project is under MIT License

See https://en.wikipedia.org/wiki/MIT_License

Authors

We're three computer science students with a passion for web and software development. Through this project, we've been able to experiment with the various specifics of Open Source development.

You can find our Github profiles below

For contributors

See the contributors guide

Changelog

See the changelog

postscript

Thx to https://github.com/fanzeyi/pokemon.json for the pokedex