Localle )) Your Local Hub Marketplace

▷ Alright, picture this: Localle is on a mission to amp up your neighborhood vibes! We're kicking things off by building a marketplace where you can connect with your neighbors, support local businesses, and buy or sell cool stuff right from your area. Imagine a hub where the coolest finds and local gems are just a click away. We're on a mission to make your neighborhood the go-to spot for connections, sales, and that awesome community vibe. Join us in this exciting venture as we craft the first step towards an epic neighborhood experience!

Check it live out here.

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 🚀

▷ Introducing Localle Marketplace's Game Plan! It's all about rocking our unique vibe and unlocking doors to some serious growth and impact.

• Boosting Local Swagger: Let's amp up our street cred by teaming up with local legends and getting our name out there in the community.

• Community Empowerment: We're all about backing the little guys! Let's create a space where local businesses can thrive together, building a tight-knit community.

• Smooth Shopping Vibes: Our mantra? Easy peasy! We're making sure both buyers and sellers have the slickest shopping experience around.

Who's Our Crew? 🎯

🏬 Local Heroes
👨‍👩‍👧‍👦 Community Champions
🛍️ Savvy Shoppers
📱 Tech Whizzes
💰 Bargain Hunters
🚀 Aspiring Entrepreneurs
👥 Collaboration Wizards
📰 Trendsetters
🧐 The Inquisitive Locals

User Stories

▷ These user stories, requirements, and features? They're the plot twists in our website's grand narrative, guaranteeing a wild ride for our incredible users. And that's not all! We're just getting started. As our user squad grows, we'll keep weaving in more tales to keep the adventure alive and kicking.

• User Registration: As a new user, I want to sign up easily using my email or social media accounts to access Localle's features quickly.

• Product Listing: As a seller, I want a straightforward process to list my items with high-quality images and relevant details to attract potential buyers.

• Search Functionality: As a user, I want a robust search feature to find specific items easily based on categories, keywords, and filters.

• Secure Payment: As a buyer, I want a secure payment gateway integrated into the platform to make transactions confidently.

• User Profiles: As a user, I want to create and manage my profile with options to view my purchase history, saved items, and track ongoing transactions.

• Real-Time Notifications: As a user, I want instant notifications for order updates, new messages, and promotions to stay engaged and informed.

• Review and Ratings: As a buyer, I want the ability to rate and review sellers based on my experience to aid others in making informed decisions.

• Responsive Design: As a user, I expect a seamless experience across various devices, ensuring the platform is accessible and functional from anywhere.

• Seller Dashboard: As a seller, I need a comprehensive dashboard to monitor sales, track inventory, and manage listings efficiently.

• Feedback Mechanism: As a user, I want an easy way to provide feedback or report issues, ensuring continuous improvement of the platform.

• Geolocation Services: As a user, I want to discover local sellers or items nearby, leveraging geolocation features for a personalized experience.

• Wishlist and Favorites: As a user, I want to curate a wishlist or favorite items to revisit and purchase later without searching again.

• Integration with Social Media: As a user, I want to share my favorite finds or purchases on social media platforms directly from Localle.

• Seller Verification: As a buyer, I want sellers to be verified to ensure authenticity and credibility of listed products.

• Customer Support: As a user, I need access to responsive customer support channels, like live chat or email, for quick issue resolution or inquiries.

Wireframes

▷ We're all about that sleek vibe with a single font family to keep things clean and seamless. But hey, the future looks spicy! We're diving into custom font territory, backed by loads of UX research, sharper business goals, and some epic partnerships.

Started with a free template to hustle up our MVP launch - gotta nail those must-haves, you know? But hey, that's just phase one! Digging deep into UX research and leveling up with TechLabs training means big things for this project's next chapter.

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 rolling with Robobo's sassiness, but I'm on a mission to amp up our site's style and user experience. I'm diving into font choices that vibe perfectly with our design and audience.

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: A slick Bootstrap navbar that folds neatly on different screens, making navigation a breeze.
  • Menus: Home, About, and Shop are neatly laid out, with cool dropdowns for All Items, Popular Picks, and New Arrivals in the Shop section.
  • User-Friendly Touch: It's got your back! Depending on whether you're logged in or not, it shows just what you need—add items, run your store, or a friendly nudge to sign up.
  • One-Click Wonders: Quick buttons for the pros! Add items, run your store, peek into your inbox, or simply wave goodbye—all at the click of an icon.
  • Cart at a Glance: Oh, and that cart? It's right there, visible and ready to go, for those bigger screens. Shopping made easy!

• Hero
  • Header Display: A dark-themed header section with padding and margin adjustments for styling purposes.
  • Conditional Content: Depending on the page path, it dynamically adjusts content:
  • Search Bar: On the '/inventory/all-items/' page, a search form is displayed. It includes an input field for search queries and a button to submit the search.
  • Page Title: For other pages, a centered title and a brief description are shown in white text. The title and description can be customized using template blocks.

• Footer
  • A standard footer section with dark background styling and padding to ensure visual consistency.

Home

▷ The Localle homepage welcomes you with a stylish flair and a touch of functionality! The design embodies a clean, crisp aesthetic while promising a bustling marketplace experience. This digital hub invites you with a bold "localle ))" header, hinting at the local treasures you're about to explore. Featuring an assortment of products, from telephones to iMacs, each neatly displayed with vibrant images and concise details, it's a snapshot of what's in store. Categories like "Fancy" and "Special" beckon exploration, teasing unique offerings. As you scroll through this vibrant page, you'll encounter a seamless blend of style and substance, a sneak peek into the vibrant world of Localle. And don't miss the cart icon, a subtle reminder that your purchases are just a click away.

All in

▷ All items page's packed with cool features like a navigation bar, a search function, and a bunch of trendy products displayed with images and prices. Plus, there are different categories like "Fancy," "Popular," "Sale," and "Special" to help you find just what you're looking for.

The devil's in the details

▷ Get ready for the Item detail — it's the star of the show! Packed with product cards showcasing top-notch images, prices, and the irresistible "add to cart" button (still baking). And when you're logged in, revel in the editing and delete functionalities. Switch gears to the Related Items Section for captivating cards highlighting jeans, a retro telephone, and a trendy tee. Keep an eye out for those sale badges.

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

• Add Item (Authenticated Sellers Only): Welcome to the selling floor! Only authorized sellers get access here. Upload your goods using the "Sell an item" page. Snap a pic, fill in the details, and voila! You've got an item up for grabs. We're talking images, descriptions—the works.
• Edit Item (Owner Access Only): Want to switch things up? Hit up the "Edit an item" section, but remember, only the rightful owner can access this zone. Tweak, refine, or completely overhaul your product details. It's like remodeling your storefront—slick and seamless.

• Delete Item (Owner Privilege Required): Change your mind or spot something off? No sweat! Head over to the "Delete" zone, but be warned—only the item's original owner can make it vanish. Confirm (check out the delete toggle swtich), and bam! The item's out of your inventory. It's your space, so you're in control of your shop's destiny.

Access Granted: Let's Dive In

• Alright, here's the backstage pass: We're rocking the show with allauth for login/register magic.
• we've got these cool decorators—making sure the right folks access the right stuff on the site.
• And hey, we've sprinkled some magic in the HTML to make your user journey feel just right. It's all about that personal touch!

Django Squad: Apps & Cool Stuf

▷ Alright, localle )) is a cool mix of three Django applications:

• core: The heart of it all
• inventory: Stocked and loaded
• store: Your one-stop shop

▷ And to make this awesome ride even smoother, we've got some handy Django packages on board:

• crispy_forms: Making forms stylish
• crispy_bootstrap5: Styled and Crunchy
• cloudinary Where all the good stuff is stored
• allauth: All authentication, all the time

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!

▷ We're cooking up some cool stuff! Currently in the code lab, we've got some features brewing as we speak. And that's not all! Our UX exploration is uncovering needs and desires, fueling the fire for even more awesome things to come. Right now, our focus is on bringing to life:

• About Page: Curious about us? Coming soon is an About page where you'll dive into our story, mission, and the people behind the scenes.x
• Store: We're crafting a sleek storefront complete with a dashboard for easy management and CRUD (Create, Read, Update, Delete) superpowers to handle your inventory like a boss.
• Inbox: Get ready for an inbox overhaul! Stay connected and organized with a centralized hub for your messages and notifications.
• Ratings: It's all about feedback! We're adding a ratings system to let you share your experiences and check out what others have to say.
• Reviews: Share your thoughts! Leave detailed reviews to help others make informed decisions about the products they're eyeing.
• Cart: Shopping made easy! Your virtual cart will be your buddy for collecting and managing the items you're eager to take home.
• Payment: Say hello to convenience! We're ramping up for seamless and secure payment options to make your checkout process a breeze.

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.

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

• Bootstrap. The hero behind our site's responsive design, stylish elements, and navbar magic.
• Font Awesome. The secret sauce sprinkled across our site, giving every element that visual edge with its array of icons.
• 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

• 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']

• 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 ElephantSQL.

    python3 manage.py makemigrations
    python3 manage.py migrate

▷ 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 >> It's like peeking into the project's mood board - shows any changes or new stuff.
• git add --all >> The "get ready to party" move - stages files for the big commit.
• git commit -m " " >> The official seal of approval - commits all the files.
• git push >> The grand finale - sends everything to the master branch up there on GitHub. 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
• I got this project rolling with a boost from Start Bootstrap

Borrowed Brilliance

• Code With Stein Online Marketplace
• Code Institute's I Think Therefore I Blog

Supercharged Support

• David Calikes, Code Institute Cohort Facilitator.
  • Positive and Uplifting. David'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.