E-biblio is an online e-book store specializing in motivational, self-improvement, business and marketing E-books.
It is a Business to Customer e-commerce application. As such, there are promo codes to encourage users to buy and the checkout process is very streamlined and easy to use. You do not need an account to checkout on E-biblio as it makes use of cookies to track the contents of your basket. It uses a single payment model for checkout.
As it is selling digital products, users are given instant access to their purchases after a succesful payment. Logged in users will have access through their Dashboard. Non logged in users will have access through an email.
E-biblio is primarily for two groups of people:
-
People interested in self-improvement - According to marketresearch.com, Self-Improvement Market Size: Marketdata estimates that the U.S. self-improvement market was worth $11.6 billion in 2019, and that it contracted by 10% to $10.5 billion in 2020. Marketdata forecasts a 7.7% rebound in 2021, to $11.3 billion, and forecasts 6.0% average annual growth to $14.0 billion by 2025. Life coaches and public speakers could find a lot of value in the content on E-biblio.
-
Entrepreneurs - According to salesforce.com, more than 4.4 million new businesses were created in the U.S. during 2020 — the highest total on record. For reference, that’s a 24.3% increase from 2019 and 51.0% higher than the 2010-19 average. Half a million new businesses were started in January 2021, alone. Data from our most recent B2B survey shares how and why new small business owners took the leap over this past year, and why many may reap the benefits. Ebiblio features many books about marketing and being an entrepreneur.
The site is deployed here:
I tried my best to avoid feature creep, stick to wireframes and features I planned before coding, and use Bootstrap which I have not done before on a personal project. I also tried to use the existing example code as a jumping off point wherever possible and not to "reinvent the wheel" for every design decision.
A full list of credits can be found at the bottom of this document as well as scattered throughout the codebase in the comments.
-
Roboto - Used for headings.
-
Roboto Slab - text compliments Roboto very well. Used mostly for p tags.
Colors were based off the CTA image on the landing page and the other colors were chosen with help from colormind ai
Root Colors:
- orange: rgb(227, 178, 60);
- orange-hover: rgb(207, 162, 55);
- white: white;
- grey: rgb(124, 132, 131);
- blue: rgb(45, 49, 66);
- rose: rgb(155, 106, 108);
Wireframes for the app
My last project suffered a lot from feature creep, and as a result, I tried my best to only implement the features I decided on in the planning stages of the project.
I was tempted from time to time to add a new cool feature, for example, a customer wishlist, commenting on reviews, or user book club groups, but by sticking to my original plan I believe the website is a lot stronger and I was able to finish it in roughly a month which is the time limit I gave myself.
There are four different versions of the navbar depending on the users role, customer, admin or staff, logged in status.
It features a basket icon to keep track of purchases, a searchbar, links to all the pages in the site.
The admin/staff navbar in particular makes use of nested dropdown menus.
Nav - not logged in
Nav - customer
Nav - staff
Nav - admin
The footer contains links to important site links as well as privacy and cookie policies. It also features a collapsable accordian containing the contact us form and the subscribe to newletter form.
The call to action is quite simple. I used a picture full of bright oranges that influenced the rest of the site's colors a lot. The aim is to make the user feel a sense of freedom by using ebooks.
The cta text is a simple piece of text describing the site, encouraging customers to buy something by providing a promo code, and a call to action to sign up.
The landing page also features a selection of the 8 most popular books on the site by rating score"
The category pages allow the user to browse books by category. They are paginated in blocks of 12 books.
The product detail page has a lot of functionality.
Users can add the book to their basket. The book features a rating out of 5 stars based on user reviews, if you are admin there is a link to edit the book information.
the page also features a review section. Users can add a rating and review, update and delete it. the reviews are handled by an ajax request and do not require page refresh to view.
The user dashboard is for all non staff users as staff and admin both use the built in django admin panel.
From here users can access the pdf links of all purchases.
There is a list of past orders with links to a pdf of the order invoice
There is also a list of all the users' past reviews is also in the dashboard.
The billing modal allow the user to update their billing information
The basket summary page contains a list of all items in the users basket. Items can be removed from the basket and if it is empty, the user can not proceed to checkout as minimum purchase is 50 cent. Promo codes can also be applied here.
The checkout page is a standard billing form with a stripe card element. On successful payment a webhook marks the order as payed and a confirmation email is sent.
Declined payments are redirected back to the basket summary after giving the user reason for declined payment.
I decided to make the admin panel a more integrated and useful part of the site. In one sense I felt like it would be great to design a custom admin dashboard but on the other, the admin panel is such a strong out of the box feature of django and it seemed a little redundant to reinvent the wheel so to speak.
The site makes use of signals for a few things, but a good example is the admin newsletter. Anybody in the subscription list will be sent a post save signal email.Neat and elegant solution.
This was a feature I almost included in the project but I decided to leave it out as it was not part of my original plans/user stories. My last project had a lot of feature creep and it was a goal not to repeat that for this project.
I would like to set up django channels and a forum to allow users to set up and host book club meetings.
A bot or real person to be available to answer customer questions in real time.
A monthly subscription for access to all books would be a great idea.
I used google and the "what other peopole searched for" section, along with https://www.wordtracker.com/ to Narrow down a list of long and short tail keywords for SEO considerations.
The site has a dedicated Facebook business page to help promote the site.
Users can sign up to the email newsletter from the footer of the website and their is a convenient unsubscribe link at the bottom of each email sent by admin. Admin can create a newletter from the admin panel and when it is saved a post_save django signal seds the mail to everyone in the subscribed list.
Testing can be found here
- IDE (Intigrated Development Environment)
- remote repository hosting platform
HTML | CSS | JavaScript | python
- Languages Used to make the site
- libraries and framework used to make the site
- Used to check site responsiveness
- Check for HTML errors
- Check for CSS errors
- Check for python errors
- check for JavaScript errors
- for Icons
- to make wireframes
- to make database design
The site is deployed on Heroku. The link is here: https://e-biblio.herokuapp.com/
Steps to deploy the site on Heroku:
-
in code editor add requirements for Heroku to install by typing the following commands into the terminal:
- pip3 freeze > requirements.txt
-
create a Procfile in the same directory as manage.py and paste in the following:
- web: gunicorn ebiblio.wsgi
-
create a runtime.txt file and add the following:
- python-3.8.13
-
in settings.py add Heroku to allowed hosts
-
commit and push changes
-
log in to Heroku or make an account
-
click create a new app in the top right corner
-
name your app and choose the region you live in
-
in the resources tab of your app dashboard add the Postgres database resource
-
in the settings tab click reveal config vars and add the following
- DATABASE_URL (added automatically)
- EMAIL_PASS - the app uses google, steps to set up app passwords found here
- EMAIL_USER - Email account address
- SECRET_KEY - can be anything
- Stripe variables: Create or log into your stripe account and in the developer section find the following variables.
- STRIPE_ENDPOINT_SECRET - your stripe endpoint secret
- STRIPE_PUBLISH_KEY - your stripe publishable key
- STRIPE_SECRET_KEY - your stripe secret key
- For AWS services you will need the following. Log into aws or create an account.
- AWS_ACCESS_KEY_ID - your access key
- AWS_SECRET_ACCESS_KEY - secret aws access key
- AWS_STORAGE_BUCKET_NAME - an s3 storage bucket
- a full walkthrough can be found here
-
Install the Heroku CLI
-
in the terminal type: heroku git:remote -a yourappname
-
save and commit to git then type: git push heroku main to start building
-
More details can be found here
-
if the build fails in heroku dashboard of your app, in the top right corner click the 'more' button and check logs to get an indication of the problem
-
In stripe you will also need to set up a webhook.
- click webhooks, add
- select listen for intent.payment_succeded in the dropdown
- add your website url + /webhook
-
Click the view app button to see the app
How to fork the repository
- Go to github.com and log in.
- Search Ebibliop5 or go to https://github.com/xiaoniuniu89/ebibliop5
- in the top right of the page click the "fork" button
- you will now have a copy of the repository in your GitHub account.
How to clone the repository
- Go to github.com
- Log in to account
- navigate to https://github.com/xiaoniuniu89/ebibliop5
- Click the green code button that says Clone or download
- to copy from HTTPS copy URL link "HTTPS".
- open terminal
- go to the directory where you want to save the files
- type git clone and paste the link
- Press enter and the clone will be created
- To install the dependencies required to run the app, in the terminal type: pip3 install -r requirements.txt
- create a .env file in the root directory and in it, import os
- add the following environment variables in the .env file, refer to deployment to heroku section above for advice on obtaining the values for these environment variables:
- os.environ["SECRET_KEY"] =
- os.environ["EMAIL_USER"] =
- os.environ["EMAIL_PASS"] =
- os.environ["AWS_ACCESS_KEY_ID"] =
- os.environ["AWS_SECRET_ACCESS_KEY"] =
- os.environ["AWS_STORAGE_BUCKET_NAME"] =
- os.environ['DEVELOPMENT'] = 'DEVELOPMENT'
- os.environ['STRIPE_PUBLISH_KEY'] =
- os.environ['STRIPE_SECRET_KEY'] =
- os.environ['STRIPE_ENDPOINT_SECRET'] =
- for the database there are two options:
-
- In settings.py use the commented out sql lite database
-
- os.environ["DATABASE_URL"] = <'postgresdatabaseurlhere'>
-
- create a superuser in the terminal by typing: python3 manage.py createsuperuser
- run the server by typing: python3 manage.py runserver
- use the superuser credentials to log into the site
More detailed instructions can be found here
CTA image: https://unsplash.com/photos/VEoUWF2iQlQ
404 image: https://unsplash.com/photos/Guo9gNFpwgw
All books, including their pdf and covers were gotten from the following website:
https://www.idplr.com/141-ebooks
They are all from the free ebooks section
I had a lot of help from tutorials and bootstrap examples throughout this project.
- very academy
- This is a brilliant walkthrough of a bookstore. It was full of help on how to make a django site more dynamic and I learned how to make ajax calls from this tutorial, a lot about database design and setting up stripe webhooks.
- Corey Schafer
- A great walkthrough of django basics that I still go back to. I used his walkthrough to help me set up my AWS bucket.
- star rating
- A great bootstrap example I was able to work into my project.
- Bootstrap Examples
- I used a lot of the examples on the bootstrap site, a good example is this checkout page I modified for my purposes.
- bootstrap snippets
- A great site full of snippets to give inspiration and borrow from and work into your own project. Borrowed heavily for CTA. -bbbootstrap
- Image resize
- Solution to resize images before uploading to S# bucket
- Pagination
- Bootstrap styled pagination walkthrough -Invoice
- pdf invoice from user dashboard
- My mentor Precious who is always so patient and full of great ideas and can always find a way to break my site and help me find bugs.
- My wife CC for testing the site and listening to my blah blah blah about the technical aspects of the site.