CodeClan Project - AdventureGrid Admin Panel

Table of Contents

1. Project Brief
   • Built With
   • Reflections
2. Getting Started
   • Installation
3. Contact
4. Acknowledgments

AdventureGrid Admin Panel

An app built in Flask which allows the admin of the website AdventureGrid to manage their users and experiences. AdventureGrid is an ecommerce site that shares/sells local experience packages in a B2C format. As an extension, also build the landing page for AdventureGrid which displays the data. For a demo version, it is hosted using PythonAnywhere at:

• AdventureGrid

adventuregrid.mp4

MVP

• It should store and track individual experiences, including a name, description, location, image and whether or not it is the featured experience (displayed at the top of the landing page).
• It should store and track users, including a name, email and username.
• The admin should be able to create and edit users and experiences separately.
• Show an dashboard page, listing all the details for all the experiences in a single view.
• The admin should be able to edit these items, change the featured experience, and delete experiences and users.

Inspired by

Shopify, Itison, Groupon, etc.

Possible Extensions

• Add reviews of experiences from the members, which can be viewed in the admin panel, but should not be allowed to edit or delete.
• Within a user, view the list of experiences, and vice versa.

Advanced Extension

• Create a landing page for the AdventureGrid site, pulling a grid of experiences, a list of users showing how many experiences they have been on, and displaying the featured experience, and a review as well.

Design

I designed the Figma file for AdventureGrid in 2021 whilst practicing UX design in Figma for the Google UX Design certification. You can view the landing page here:

• Design File - Figma

This project was a continuation of this project, building out the admin dashboard for AdventureGrid, which I built and designed from scratch, using inspiration from the design file above. As an extension, I also built out the landing page shown.

Built With

• HTML
• CSS
• Python
• Flask
• Postgresql

Reflections

I really enjoyed the styling of this project, and thinking through the user experience carefully. One of the key difficulties I encountered was actually the hosting of the demonstration site, as I had never hosted a Flask site before. I will return to the project in the future to add the e-commerce functionality.

Getting Started

Prerequisites

To run this app, you must install:

• psychopg

  pip3 install psycopg2

• Flask

  pip3 install Flask

• Postgresql

Installation

1. Clone the repository

   git clone https://github.com/kelsiesmurphy/CC_Project_AdventureGrid.git

2. Navigate to the folder using terminal
3. Create the database

   psql -d experience_manager -f db/experience_manager.sql

4. Seed the database with pre-set data by running the console.py file

   python3 console.py

5. Run Flask

   flask run

6. Open in browser (Google Chrome is recommended): http://127.0.0.1:4999
7. To stop the server enter ctrl + c in your Terminal

Contact

Kelsie Murphy - LinkedIn - Twitter

Project Link: https://github.com/kelsiesmurphy/CC_Project_AdventureGrid

Acknowledgements

Support, guidance and instructors at CodeClan

All images from Pexels.com

All icons from UntitledIcons