🎥 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.
Ribbit's functionalities are mostly based on Reddit, such as communities, upvote/downvote posts, etc. Click here for complete functionalities rundown.
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)
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
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
I've set up Git Actions for this repository to run automated tests on pushes/PRs made on the main
.
- 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.