Introduction

check out Live demo here

This is a full stack e-commerce application that I have been building in my spare time. It has many built in features I find myself reimplementing every time I want to prototype an experimental product.

Although my passion is to learn how machine learning and artificial intelligence can improve user experience and engagement, it is crucial to understand how that part fits into a monstrously complicated system. I wanted this project to be a simple template for any such experimentation with ML models.

Attempting to keep my promise of simplicity, I decided that Django would be a good option for the back end due to its incredible versatility and developer experience. The Django admin is the perfect interface to modify and use due to its proximity to the database. But the purpose of admin panel isin't merely to display tables. The admin templates are infinitely customizable, so one could add custom analytics, graphs models to any page, using the same tools they would in python.

For the front end, I used React with Next JS. Coming from a create-react-app background, server side rendering with React was new to me. But it had one advantage that really attracted me. Most e-commerce websites share a common flaw. They are slow. This is because the server has to load all the content as well as any additional API calls and 3rd party scripts the page requires every time the user clicks on a new link. This flaw, mainly due to legacy, and old codebases, is avoided in a very slick fashion with the static generation tool built into Next JS. This allows us to edit whatever products we want to in Django admin and re generate the website. The remaining API calls are very minimal.

This method, however, is not ideal for everyone. This approach only works if our products don't constantly change. That is, the website only has to re render once an hour, or day, or so.

Quick Start

1. Clone the repository.
   git clone https://github.com/oyavuzjr/Django-Nextjs-Ecommerce-Boilerplate
cd Django-Nextjs-Ecommerce-Boilerplate
2. Check your python version. My version is 3.8.7.
   python --version
3. Install the python packages using requirements.txt.
   pip install -r requirements.txt
4. As usual with Django, we will initialize the database using the two commands.
   python manage.py makemigrations
python manage.py migrate
5. Create super user for admin login
   python manage.py createsuperuser
6. Run the server.
   python manage.py runserver
   At this point, you can visit localhost:8000, but will see an error. This is okay since we don't have a static site generated yet. If you go to /admin, you will be able to access the admin page.
7. Set up the React project
   cd REACT
npm install
8. Inside the REACT folder, create a file called .env and populate it with the following variables. You can adjust to your own use case.
   API_ENDPOINT="http://localhost:8000/api/"
IMAGE_ENDPOINT="http://localhost:8000/_next"
GA_TRACKING_ID="..."
9. finally, lets build the static website. The server has to be running when you are building it!
   npm run build
   
   Done.

Features

• Statically generated, almost fully functional ecommerce web application built with React.
• Google Analytics works out of the box when the proper ID is set in .env
• Fully customizable Django back end with built in Authentication, REST API, and custom models.
• Products are editable in the admin interface. Just log in as super user, edit products, and re-generate the static site.
• Uses Redux with easy-peasy for state management. The statically generated content results in less-cluttered redux stores.
• Simple product tagging system for use in Inferential Machine Learning applications.

Todo:

• Use Bootstrap-React instead of using css.
• Convert ALL inline styles to .module.css files.
• Simple recommendation system using product tagging
• Add react skeleton for when the user is waiting for the images to load.