RIBBIT

🔗 LAUNCH

Fullstack Reddit Clone Made With React+Redux & Django.

Show screenshots

❓ 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

1. First clone the repository

$ git clone https://github.com/juliantjg/Ribbit.git

2. Setting up python virtual environment and activating it

$ cd Ribbit
$ python -m venv myenv
$ source myenv/bin/activate

4. Install Ribbit's dependencies

$ cd backend
$ pip install -r requirements.txt

6. Setting up environment file using settingsExample.py

$ mv backend/settingsExample.py backend/settings.py

7. 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',
    }
}

8. Once the DB has been properly set up, run migrations

$ python manage.py makemigrations
$ python manage.py migrate

9. 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

1. Install dependencies

$ cd frontend
$ npm install

2. 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

1. 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

1. Click on the ribbit-full-stack package provided on the the Packages section of this repository (alternatively, you can click here):

2. Next, pull the image:

docker pull ghcr.io/juliantjg/ribbit-full-stack:latest

3. 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.
=======================================================

4. 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.

View build snapshot

🛠️ 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.

✍️ Author

• Julian Tjiong

📜 License

• Standart MIT License