Welcome to ClipHub!

▷ Your ultimate destination for sharing beauty through breathtaking videos! ClipHub is all about showcasing beautifully crafted clips that highlight the wonder of landscapes and the artistry behind them. Say goodbye to mundane content and hello to stunning visuals that ignite your appreciation for the world around you.

Ready to immerse yourself in a feast for the senses? ClipHub offers a rich library of visually captivating clips, featuring everything from majestic mountains to serene beaches. There’s something for everyone who cherishes the beauty of nature!

Here’s the best part: you’re in control. Explore as many clips as you like, enjoying a journey through diverse landscapes without any commitment. When a clip truly resonates with you, dive deeper into that stunning scene and experience more.

Discover the joy of appreciating beauty in every frame. With ClipHub, connecting with nature has never been more engaging and delightful.

Ready to embark on this visual journey? Check it out live here. and immerse yourself in a world of stunning clips!

Content Guide 🗺️

▷ Feel free to cruise through using the content button up there in the top right corner—it's like a breeze for getting around.

Planning & Development

Business Strategy 🚀

▷

Who's Our Crew? 🎯

🎨 Aesthetic Creators ✨ Beauty Enthusiasts 🖼️ Curators of Taste 🌿 Mindful Viewers 🌍 Cultural Aficionados

Methodology in Motion

▷ Our user stories, requirements, and features are the plot twists in the grand narrative of our website, driving an exciting journey for our users. In line with Agile methodologies, our course facilitator and tutor take on the honor of serving as our Scrum Masters. We've embraced both physical Kanban boards at home and Asana for managing and tracking progress, ensuring continuous improvement and delivery.

Each user story is translated into GitHub issues, which are attached to the project's repository. This combination of physical and digital tools keeps the development cycle dynamic and transparent, ensuring we stay on track and sync. And the adventure? It's just getting started! As our user base grows, we'll keep weaving in new features and stories to keep the experience fresh, engaging, and always improving.

Wireframes

▷ While our platform may draw initial comparisons to TikTok, our vision extends beyond imitation. We're infusing our unique design sensibilities as we evolve. With every stride in UX research and business expansion, we're committed to refining our platform's identity. Armed with newfound expertise from TechLabs, I'm ready to propel us towards unparalleled growth and innovation.

Color Scheme

▷ In the initial design phase, we're rocking a grayscale palette to highlight content structure and nail that user experience. Once we've aced the UX research, we're bringing in accent colors to jazz up the design and make user interaction smoother.

Typography

▷ Right now, we’re embracing Robobo's flair, but I'm on a mission to elevate our site’s style and user experience. I’m exploring font options that resonate with our design and audience for a more cohesive look.

Up Next: What's in Store!

▷ Hey, listen up! We're all about making waves in the community and doing it right. We focused on the essentials, cherry-picking the must-haves that match most needs to get our MVP out the door on time.

Across the Whole Site

Navbar
- Navigation: Seamless links to key areas of the platform, including the homepage and upload section.
- Menus: Intuitive dropdown menus for user options, enhancing accessibility and user interaction.
- User-Friendly Touch: A clean design with a search bar for quick access to clips and a visually appealing avatar for profile access.
- One-Click Wonders: Quick actions like uploading clips and toggling authentication options with just a click.

Home

▷ Welcome to the ClipHub home screen—your one-stop destination for everything clips! Here's how this clean and interactive layout works:

A Navigation Made Easy:

The left sidebar offers quick access to your favorite categories, allowing you to discover new clips with ease.
- Sidebar: Navigate through various sections such as home, music, or profile—always within reach.
- Popular Profiles & Topics: Easily browse trending topics or profiles, keeping you updated with what's hot.
Upload Your Clips: Ready to share your content? Just click the "Upload" button, and you'll be able to contribute your own video clips to the ClipHub community. A smooth and seamless experience for all creators!
Explore & Engage: Dive into individual clips by clicking on them, which opens up the detailed view. Each clip is beautifully presented with controls to engage, watch, and interact.
Explore & Engage: Dive into individual clips by clicking on them, which opens up the detailed view. Each clip is beautifully presented with controls to engage, watch, and interact.
Log in and out: To fully engage with ClipHub, you'll need to sign in. This ensures a personalized experience and secure management of your uploads and interactions. Log in or create an account to get started

The layout is both functional and stylish, ensuring you can focus on what matters—enjoying enjoying all things beuatiful 🎥

The devil's in the details

▷ When you dive into a video's detail page, get ready for the thrill to kick into high gear. It's your chance to make your mark, be heard, and truly engage with the community. Say goodbye to being just a spectator – here, you're a vital player. Shower the creators with love by dropping your comments, igniting lively discussions, and being a force of positivity. Hit that like button and spread the joy to your fellow creators.

If it's yours, go wild—CRUD it however you like

Add Item (Authenticated Sellers Only):
Edit Item (Owner Access Only):

Bring it on (Owner Privilege Required):

▷ Ready to make the world smarter, one clip at a time? Log in, and flex those creator muscles by uploading your masterpiece. It's as easy as drag, drop, and boom—your clip is live!

Iconic Entry: A cloud upload icon that practically begs to be clicked.
Video Preview: Don't just upload—preview in style before sharing.
Validation Matters: MP4 files only, because we like to keep it crisp.

Access Granted: Let's Dive In

Alright, here's the backstage pass: We're rocking the show with allauth for login/register magic.Our 🔑 tokens make sure only the right folks access the right stuff. Secure, seamless, and always behind the scenes.

Django & React Squad: Apps & Cool Stuf

▷ Alright, ClipHub is a slick fusion of Django applications, each bringing its own magic:

core: The powerhouse that keeps it all running
clips: Your curated library of knowledge, always ready to roll
comments: Where conversations come to life
flags: Keeping things clean and in check
followers: Building the crowd, one fan at a time
likes: Your quick nod of approval
profiles: Your digital identity, front and center

▷ And to make this journey even smoother, we've got some powerful Django packages on the backend:

cloudinary: Handling seamless media uploads.
allauth: Managing authentication with ease.

Inside the Data Universe

▷ Check it out—the backstage of our database magic! This diagram reveals the intricate web of connections between our database models. It's a snapshot of simplicity and power. But hey, there's a deeper story to each model. Take a closer peek to unravel their secrets and see how they all come together!

Coming Soon: The Cool Features!

▷ While ClipHub is fully functional, we're dedicated to elevating the user experience even further. Our team is hard at work, focusing on improvements and rolling out exciting new features. Here’s what we have cooking in the code lab:

Profile Customization: Personalize your profile to showcase your unique style and interests.
Share Clips: Easily share your favorite clips across various social media platforms.
Inbox: A seamless messaging feature for enhanced communication.
Trending Section: Discover the hottest clips trending within the community.

Testing

All the tests in one place

Tech Stack

Languages Spoken Here

HTML. The foundation of our web magic.
CCSS. Adding that stylish flair to everything you see.
JavaScript. Bringing life to elements and making things interactive while supporting the HTML & CSS groove.
Python. Powering the brains behind the scenes.

Framework used and abused

Django. The web wizard behind this project's magic. It's the sleek toolkit that makes building powerful and secure websites a breeze.
React. The engine behind our interactive vibes! This slick library powers our UI, making it easy to create stunning, responsive experiences that keep you engaged.

Storage trusted

Amazon Web Services (AWS). The home for all our static and media files, securely stored in the digital realm.
Cloudinary - Where media becomes magic. It's our creative hub, transforming images and videos into dazzling web assets.

Database

ElephantSQL. Your database sanctuary, where data roams freely and securely, as robust as an elephant.

Libraries

React Router.The master navigator, guiding you through ClipHub's dynamic landscape with seamless transitions.
React Icons.The style enhancer, adding that extra flair to our interface with a delightful array of icons.
Tailwind CSS. The design magician, conjuring up a sleek and responsive UI that dazzles on every screen.
Axios. The communication wizard, ensuring our app connects effortlessly to APIs without breaking a sweat.
JWT Decode. The security sentinel, working behind the scenes to keep your data safe and sound.
Google Fonts. Working its magic with the Roboto font family, giving our site that unique typography and unmistakable flair.

Toolbox Essentials

Gitpod - My trusty coding hangout for this project.
Git - Keeping things organized with version control.
Github - Home to my precious code repository.
Heroku - Where my deployed web app finds its cozy home.
Am I Responsive - My go-to for testing and capturing those sleek web page shots for different devices.
Google Chrome DevTools - Testing and fixing, one site glitch at a time.
w3 html validator -Making sure my HTML plays by the rules.
w3 css validator - Keeping my style game sharp and error-free.
jshint - Giving my JS code the thumbs-up after testing and validating.
Dead Link Checker - Keeping those links alive and kicking.
DBDiagram - The mastermind behind my DB models' cool diagrams.

Deployment

GitPod

▷ Getting your app ready

Fire up a terminal window and navigate to the root directory.
- Integrate WhiteNoise to seamlessly serve static files for your React app and Django Admin on deployment
```
$ pip3 install whitenoise==6.4.0
```
- Craft a fresh staticfiles folder in the root directory
```
$ mkdir staticfiles
```

Open up your settings.py file

Setup databse

import dj_database_url

DATABASES = {
    'default': dj_database_url.parse("<your Postrgres database URL>")
}

Update settings.py in your Django app
```
DEBUG = False
```

Update Allowed Hosts

ALLOWED_HOSTS = ['.herokuapp.com', 'localhost']

In INSTALLED_APPS, slide cloudinary_storage beneath django.contrib.staticfiles to let WhiteNoise take charge of your static files.

    INSTALLED_APPS = [
        ... # Other apps
        'django.contrib.staticfiles',
        'cloudinary_storage',
        'cloudinary',
        ... # And more apps
    ]

In the MIDDLEWARE list, slot WhiteNoise in just below SecurityMiddleware and right above SessionMiddleware.

    MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware', 
    'corsheaders.middleware.CorsMiddleware',
    'whitenoise.middleware.WhiteNoiseMiddleware',
    ... # Other middlewares
    ]

In the TEMPLATES list, tweak the DIRS key to point Django and WhiteNoise to your React index.html during deployment:

    TEMPLATES = [
        {
            'BACKEND': 'django.template.backends.django.DjangoTemplates',
            'DIRS': [os.path.join(BASE_DIR, 'staticfiles', 'build')], # 🔍 Check this out!
            'APP_DIRS': True,
            'OPTIONS': {
                'context_processors': [
                    'django.template.context_processors.debug',
                    'django.template.context_processors.request',
                    'django.contrib.auth.context_processors.auth',
                    'django.contrib.messages.context_processors.messages',
                ],
            },
        },
    ]

In the static files section, define STATIC_ROOT and WHITENOISE_ROOT to direct Django and WhiteNoise to your admin and React static files for deployment.
```
STATIC_ROOT = BASE_DIR / 'staticfiles'
WHITENOISE_ROOT = BASE_DIR / 'staticfiles' / 'build'
```

Back on the CL
- Create a requirements. This file tells Heroku what your app needs to run smoothly.
```
$ pip3 freeze --local > requirements.txt
```
- Craft a Procfile. This tells Heroku how to run your app. Think of it as the main instruction manual.
```
$ echo web: python app.py > Procfile
```
- Shift models to remote DB.
```
$ python3 manage.py migrate
```

The React front end will serve from the domain's root URL, so let's make sure it takes precedence over the DRF interface.

In the project's urls.py get rid of path('', root_route)

urlpatterns = [
    path('', root_route), # ❌ Later 🐊
    path('admin/', admin.site.urls),
    ... # Lots other paths follow
]

Import TempleteView from django.views.generic

from django.contrib import admin
from django.urls import path, include
from django.views.generic import TemplateView # 🌟 Bring it in!
from .views import logout_route, root_route

Switch it up with this line: path('', TemplateView.as_view(template_name='index.html')) 🚀

urlpatterns = [
    path('', TemplateView.as_view(template_name='index.html')),
    path('admin/', admin.site.urls),
    ... # Lots other paths follow
]

Prefix api/ to all the API URLs, except for the home page and admin panel paths! 🚀 And don’t miss this key line: handler404 = TemplateView.as_view(template_name='index.html')—be sure to add it at the bottom! 🔑 And your setup should look pretty much like this:

from django.contrib import admin
from django.urls import path, include
from django.views.generic import TemplateView
from .views import logout_route, root_route

urlpatterns = [
    path('', TemplateView.as_view(template_name='index.html')), 
    path('admin/', admin.site.urls), 
    path('api/api-auth/', include('rest_framework.urls')), 
    path('api/dj-rest-auth/logout/', logout_route), # Logout route gotta match up first❗️
    path('api/dj-rest-auth/', include('dj_rest_auth.urls')), 
    path('api/dj-rest-auth/registration/', include('dj_rest_auth.registration.urls')),
    path('api/', include('clips.urls')),
    path('api/', include('comments.urls')),
    path('api/', include('flags.urls')),
    path('api/', include('followers.urls')),
    path('api/', include('likes.urls')),
    path('api/', include('profiles.urls')),
]


handler404 = TemplateView.as_view(template_name='index.html')

Last up. On the react app load Open the axiosDefaults.js file on your VS code, set axios.defaults.baseURL to /api.

import axios from 'axios';

axios.defaults.baseURL = '/api'; // Set the base URL to API heaven 😇
axios.defaults.headers.post['Content-Type'] = 'multipart/form-data';
axios.defaults.withCredentials = true;

export const axiosRequest = axios.create();
export const axiosResponse = axios.create();

Now that we've set up static file collection, let's bundle all static files from Django admin and React into the staticfiles folder for deployment. 🚀 Fire up your CL in the Django project directory, and go on typing
```
$ python3 manage.py collectstatic
```
Next, let's build the React app and transfer the files to the staticfiles folder. 🚀 Open a new terminal and cd into the frontend directory, and run
```
$ npm run build && mv build ../staticfiles/.
```
You gotta rerun this command every time you deploy changes to your static files, including React code ✨ But to replace the old files, just keep running the following command 🔄
```
$ npm run build && rm -rf ../staticfiles/build && mv build ../staticfiles/.
```
Still in you dango project's root directory, make sure Heroku uses the right Python version for your project! 🚀
```
$ echo "python-3.9.16" > runtime.txt
```

▷ The site first brewed up in GitPod and then landed in this remote GitHub repository.

And let's talk GIT – the commands that made the magic real.

git status # 👀 Peek at changes or new stuff — your project’s mood board.

git add --all # 🎯 Get everything prepped — stage files for the big commit.

git commit -m " " # ✅ Seal of approval — commit the changes.

git push # 🚀 Grand finale — send it all to GitHub’s master branch. Boom!

Heroku

▷ After all that hustle, it's time to set this project free in the wild, wild web world. Let it spread its wings and conquer the digital realm!

Started fresh on Heroku and gave our app a European vibe.
Swiped right for GitHub as our deployment wingman.
Dropped in some super-secret config vars for that behind-the-scenes magic. Check out the cool settings
Finally hit that deploy button and let the awesomeness unfold

Big Ups

▷ Sure, I've been the lone wolf, architecting this whole thing—planning, designing, and coding away. But truth be told, I owe a lot to the squad that's had my back. And you know what? I wouldn't have it any other way. The teamwork vibe in coding is what makes this journey epic, and I'm all about embracing that collaborative spirit. Cheers to coding camaraderie!

Bits 'n' Bobs

I've scavenged all the beautiful free images and pictures from Unsplash

Borrowed Brilliance

Code Institute's moments

Supercharged Support

Kristyna Wach, Code Institute Cohort Facilitator.
- Positive and Uplifting. Kristyna's Always available and boosts my confidence everytime we chat.
Oluwafemi Medale, Code Institute Mentor.
- Bugs terminator. He always make times, when there's no time at all.
Chat GPT, Mister know it all.
- Documenting King. Not always correct, but frequently inspiring.

Name		Name	Last commit message	Last commit date
Latest commit History 265 Commits
.github/ISSUE_TEMPLATE		.github/ISSUE_TEMPLATE
.vscode		.vscode
clips		clips
comments		comments
drf_api		drf_api
flags		flags
followers		followers
frontend		frontend
likes		likes
profiles		profiles
staticfiles		staticfiles
.gitignore		.gitignore
.gitpod.dockerfile		.gitpod.dockerfile
.gitpod.yml		.gitpod.yml
.python-version		.python-version
Procfile		Procfile
README.md		README.md
db.sqlite3		db.sqlite3
manage.py		manage.py
requirements.txt		requirements.txt
runtime.txt		runtime.txt
testing.md		testing.md

mistersouza/cliphub

Folders and files

Latest commit

History

Repository files navigation