https://github.com/linguini1/beano
A simple full-stack website using Django and React made to display jelly bean information from a database.
https://github.com/linguini1/beano
api css css3 database django django-rest django-rest-api django-rest-framework html javascript js mobile mobile-website python react react-js web-development website
Last synced: 9 months ago
JSON representation
A simple full-stack website using Django and React made to display jelly bean information from a database.
- Host: GitHub
- URL: https://github.com/linguini1/beano
- Owner: linguini1
- Created: 2022-03-07T01:05:44.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2023-01-15T03:39:48.000Z (almost 3 years ago)
- Last Synced: 2024-12-29T13:34:02.057Z (11 months ago)
- Topics: api, css, css3, database, django, django-rest, django-rest-api, django-rest-framework, html, javascript, js, mobile, mobile-website, python, react, react-js, web-development, website
- Language: Python
- Homepage:
- Size: 17.3 MB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
BeanO
Matteo Golin
[](https://opensource.org/licenses/MIT)
A simple full-stack website made to display jelly bean information from a database.
## About
This website allows users to view a simple webpage wherein a selection of jelly beans from an API accessible database
is displayed. The user can also use the form on the "create" page to add their own jelly beans to the collection.
The _on sale_ property of each bean can only be set through the Django administrator page.
## UI Overview
### Home Page
The home page displays the collection logo and shows the navigation menu across the bottom of the screen.
### Collection Page
The collection page displays all the beans in the collection through a sliding carousel. Users can navigate left and
right, and see how many of the total beans they've looked through via the display underneath the carousel.
### Create Page
Users are invited to add their own beans to the collection! Beans require a name, colour, price and a short
description. Users can also add tags to their beans to describe what categories they belong to. Categories are
pre-determined.
Notably, the bean icon next to the text `your bean` changes colour as the user inputs their desired bean colour
in hex format.
## Technologies
- HTML
- CSS
- React
- Django
- Django REST Framework
## Notes
Currently, only a mobile view of the website is visible.
Additionally, this application makes use of the hash router because it was a simple fix for the URLs, and routing was
not the main focus of this project.
Finally, the API does have additional functionality not yet used in this project (the ability to fetch single beans'
data using an ID in the URL, and also a getRoutes URL that shows a list of endpoints). This additional functionality was
added in case I wanted to use it later on.
### Running From Fresh Install/Clone
The project requires `npm install` and `npm build` to be run in the `./frontend` directory. This will create the
build that will be hosted by Django.
Additionally, a `secretkey.py` containing the Django secret key must be created in `./beanO`. The secret key will be a
string stored in a variable called `secret_key`.