❓ What Is Ribbit?
🎥 Intro Video
Ribbit is a web application made with Django (backend api) and React.js + Redux (frontend). Made in reference to Reddit, Ribbit provides features such as sharing posts, communities, and many more. Please check this video for details regarding Ribbit's features and development.
⚙️ What Does It Do?
Ribbit's functionalities are mostly based on Reddit, such as communities, upvote/downvote posts, etc. Click here for complete functionalities rundown.
🔨 Utilization
Ribbit utilizes the following points:
- Django REST Framework - Simple JWT for authentication
- Complete back-end APIs for authentication, users, posts, subs, etc
- Forgot password functionality
- Front end with React
- Front end API fetching and form submissions
- Redux for state management
- Proper error handling
- Group management system
- Responsive UI with css, bootstrap, etc
- Loader, error handling, etc
- MySQL database on deployed server
- Back-end unit testing
- GitHub CT (Continuous Testing)
- Dockerized the entire project under a container
- Deployed on online virtual machine service (Digital Ocean)
✈️ Getting Started (without Docker)
Setting up Ribbit on your local machine without Docker? Here are the instructions:
Setting up the back-end
- First clone the repository
$ git clone https://github.com/juliantjg/Ribbit.git
- Setting up python virtual environment and activating it
$ cd Ribbit
$ python -m venv myenv
$ source myenv/bin/activate
- Install Ribbit's dependencies
$ cd backend
$ pip install -r requirements.txt
- Setting up environment file using
settingsExample.py
$ mv backend/settingsExample.py backend/settings.py
- Configure your local MySQL credentials
# Go to the newly created `settings.py` file, and find the `DATABASE` configuration:
DATABASES = {
'default': {
'ENGINE': 'django.db.backends.mysql',
'NAME': 'your_db_name',
'USER': 'your_mysql_user',
'PASSWORD': 'your_mysql_password',
'HOST': 'localhost',
}
}
- Once the DB has been properly set up, run migrations
$ python manage.py makemigrations
$ python manage.py migrate
- Finally, run the server
$ python manage.py runserver
=======================================================
Watching for file changes with StatReloader
Performing system checks...
System check identified no issues (0 silenced).
March 08, 2023 - 00:40:33
Django version 4.1.3, using settings 'backend.settings'
Starting development server at http://127.0.0.1:8000/
Quit the server with CONTROL-C.
=======================================================
Setting up the front-end
- Install dependencies
$ cd frontend
$ npm install
- Run the server
$ npm start
=======================================================
Compiled successfully!
You can now view frontend in the browser.
Local: http://localhost:3000
On Your Network: http://192.168.0.88:3000
=======================================================
That's it!
Running tests
- To run API tests, simply do the following
$ cd backend
$ python manage.py test
🐳 Docker
You can access the dockerized full stack version of Ribbit under the GitHub Container Registry here. Follow these steps to run the Docker image on your local machine:
Setting up full stack app with Docker
- Click on the
ribbit-full-stack
package provided on the the Packages section of this repository (alternatively, you can click here):
- Next, pull the image:
docker pull ghcr.io/juliantjg/ribbit-full-stack:latest
- Finally, run the image:
docker run -p 8000:8000 -it ghcr.io/juliantjg/ribbit-full-stack:latest
=======================================================
Watching for file changes with StatReloader
Performing system checks...
System check identified no issues (0 silenced).
March 14, 2023 - 09:11:34
Django version 4.1.3, using settings 'backend.settings'
Starting development server at http://0.0.0.0:8000/
Quit the server with CONTROL-C.
=======================================================
- Finally, access the application by entering the following link on your browser:
http://localhost:8000/#/landingPage/functionalitiesLanding
♻️ Continuous Testing
I've set up Git Actions for this repository to run automated tests on pushes/PRs made on the main
.
🛠️ Built With
- React - React is a free and open-source front-end JavaScript library for building user interfaces based on components.
- Bootstrap - Bootstrap is a free and open-source CSS framework directed at responsive, mobile-first front-end web development.
- MySQL - MySQL is an open-source relational database management system.
- Digital Ocean - DigitalOcean Holdings, Inc. is an American multinational technology company and cloud service provider.
- Django - Django is a free and open-source, Python-based web framework that follows the model–template–views architectural pattern.
- Redux - Redux is an open-source JavaScript library for managing and centralizing application state. It is most commonly used with libraries such as React or Angular for building user interfaces.
- Docker - Docker is a set of platform as a service products that use OS-level virtualization to deliver software in packages called containers.