ecom-demo

Ecom-Demo-Preview

---

This is a baseline eCommerce application that you can use to build your own online store.

Used frameworks/languages and tools are:

Django	Tailwind CSS
Bootstrap	Python
Pytest	Javascript
Jquery	HTML
CSS	SQLite
Git	Stripe API

---

Table of Content:

• Guide to run the project
  • Virtual environment setup
  • Database setup
  • Create admin user
  • Tailwind CSS setup
  • Final step

---

Guide to run the project

• The first thing to do is to clone the repository:

> git clone https://github.com/nitesh585/ecom-demo.git
> cd ecom-demo

---

Virtual environment setup

• Create a virtual environment to install dependencies in and activate it:

> virtualenv venv
> . venv/bin/activate

• Then install the dependencies:

(venv)> pip install -r requirements.txt

Note the (venv) in front of the prompt. This indicates that this terminal session operates in a virtual environment set up by virtualenv.

Once pip has finished downloading the dependencies:

---

Database setup

• Create the migrations (generate the SQL commands) according to defined models in each and every apps.

> python manage.py makemigrations

• Run the migrations (execute the SQL commands).

> python manage.py migrate

So, we done with databases. All the tables are created according to the schemas defined in model files

---

Create admin user

You can create a "superuser" account that has full access to the site and all needed permissions using manage.py.

Call the following command, in the same directory as manage.py, to create the superuser. You will be prompted to enter a username, email address, and strong password.

> python manage.py createsuperuser

---

Tailwind CSS setup

Create a new directory within your Django project, in which you'll install tailwindCSS like in any vanilla JS project setup:

> mkdir jstool && cd jstool
> npm init -y && npm install tailwindcss autoprefixer clean-css-cli && npx tailwindcss init -p

open the package.json and add build script to it.

...
"scripts": {
  "build": "tailwind build ../static/css/tailwind.css -o ../static/css/style.css && cleancss -o ../static/css/style.min.css ../static/css/style.css"
},
...

tailwind.config.js should be something like this:

module.exports = {
    future: {
        removeDeprecatedGapUtilities: true,
        purgeLayersByDefault: true,
    },
    purge: {
        enabled: false, //true for production build
        content: [
            '../**/templates/*.html',
            '../**/templates/**/*.html'
        ]
    },
    theme: {
        extend: {},
    },
    variants: {},
    plugins: [],
}

now make a Tailwind entry point in static/css/tailwind.css

@tailwind base;
@tailwind components;
@tailwind utilities;

We are ready to build.

> npm run build

This command will generate two files: styles.css and styles.min.css

Link styles.min.css to your templates and enjoy.

---

Final step

• Run the application server (only for developement)

> python manage.py runserver

• And navigate to http://127.0.0.1:8000/.

Yupeee! it's up and running 😃🤩

---

Any PR and issues are most welcome 😊

Learned from Very Academy.