Giter Club home page Giter Club logo

alienatedsoftware-forth_milestone_ai_shop_mayresub's Introduction

A.I. Shop

Hello there! Welcome to the wonderful world of A.I. art. There is no better place then to buy completely unique computer generated art works to have as mintable NFTs!

A live version can be found here.

See bottom for resubmission info.

UX

This project tries to create a Django application for a NFT store service.

The website is clean and intuitive, making navigation easy.

User Stories

As a Visitor

  • As a Visitor, I want to easily understand the main purpose of the site.
  • As a Visitor, I want to be able to view NFTs available before buying one.
  • As a Visitor, I want to be able to purchase a NFT.

As a User

  • As a User, I want to easily understand the how to navigate through the site.
  • As a User, I want to be able to update and edit my profile.
  • As a User, I want to search all NFTs on the store.

As a Staff Member

  • As a Staff Member, I want to easily understand the how to navigate through the site.
  • As a Staff Member, I want to be able to update and edit my profile.
  • As a Staff Member, I want to search all NFTs on the store.
  • As a Staff Member, I want to edit categories, courses and lessons through the admin panel.

MVP

Fully responsive.
Purchase a NFT.
Register a new account and login.
Edit profile.
Staff users can create and edit categories, products.

Existing Features

  • New Account
    To access the page the user must first create a new account by clicking on the "Signup" link on the navbar or button on landing page form. Will receive an e-mail verification on creation.

  • Login
    To access the page the user must use their credentials to login. In the case of this build there is also an option to login as a "Demo User" or "Demo Staff" which allows the user experience the application utilizing a premade account. (refer to testing section)

  • Profile
    Shows your account information such as username, name, email and pre saved delivery options.

  • Edit Profile
    Allows the user to close or edit account information such as name, email, password and delivery options.

  • NFT Category
    NFTs are divided into different categories.

  • Mintable NFTs
    NFTs that are avalibile for users to purchase and sell else where. Known as 'mintable', which is referred to as avalibile to flip for profits.

  • Prints
    Prints of such NFTs, not as exclusive as it is made from paper. For site purposes and lack of product fixtures, the developer re-used some of the NFT data to act as prints also, so not as well presented.

Design

The whole UI is made utilizing Bootstrap 4. For further information, please refer to the official documentation here.

Technologies Used

Throughout the project, the following technologies were used.

Testing

Detailed tests can be found attached to this repo.

Test Accounts

For testing purposes these accounts can be used (admin + testerforai). Or feel free to create your own.

Regular user

  • Username: testerforai
  • Password: tester123

Staff user

  • Username: admin
  • Password: superuserpass

Deployment

The website is hosted and deployed by Heroku. Everything is deployed from the master branch and updates automatically whenever the branch is updated in GitHub.

  1. Log in Heroku (or create a new one if you don't have one.);
  2. Go to your dashboard.
  3. Click on the "New" -> "Create new app" button located right under the navbar.
  4. Choose a unique name for your app.
  5. Choose a region (preferably close to where you are located).
  6. If everything works fine you should see the overview page of your app.
  7. Click on Settings tab.
  8. Reveal Config vars.
  9. Here we configure the SECRET_KEY, STRIPE_PUBLIC_KEY, STRIPE_SECRET_KEY, DATABASE_URL, AWS_ACCESS_KEY_ID, AWS_SECRET_ACCESS_KEY, EMAIL_HOST_USER, EMAIL_HOST_PASS, USE_AWS values (thoose are not public and are the same values on my env.py file(which is also private)).
  10. Click on deploy tab.
  11. In the case of this project I chose to conect my app to my repository in GitHub, so it auto updates my heroku app whenever the project is pushed.
  12. Click on the Deploy Branch button.
  13. DONE!

Forking

If you want to fork the repository to your own GitHub account you can by clicking on the “fork” button under the navbar with your profile.

Cloning

  1. If you want to clone the repository into a local file you can by:
  2. Clicking on the green button “Code” and copying the url showed.
  3. Open GitBash
  4. Change directory to the desired location where you want to clone the files to.
  5. Type “git clone” and paste the copied URL
  6. Press enter and you should have your local file cloned and ready.
  7. After opening the folder you should create a new file in the root directory, name it env.py
  8. In env.py you can set your environment variables.
      import os
    
        os.environ["SECRET_KEY"] = "<your_value>"
        os.environ["STRIPE_PUBLIC_KEY"] = "<your_value>"
        os.environ["STRIPE_SECRET_KEY"] = "<your_value>"
        os.environ["DATABASE_URL"] = "<your_value>"
        os.environ["AWS_ACCESS_KEY_ID"] = "<your_value>"
        os.environ["AWS_SECRET_ACCESS_KEY"] = "<your_value>"
        os.environ["EMAIL_HOST_USER"] = "<your_value>"
        os.environ["EMAIL_HOST_PASS"] = "<your_value>"
        # os.environ["DEVELOPMENT"] = "True" --> uncoment to use DEBUG MODE
        os.environ["USE_AWS"] = "True" --> set True or False to use AWS S3 Buckets
    
    

Credits

Content

  • All content on the page was improvised by me, following along Code Insititutes' Boutique Ado mini project. So credits go to https://github.com/ckz8780

Acknowledgements

  • The wonderful tutors at C.I. but most importantly Chris Z for the mini project walkthrough.

Resubmission Details

Since it has been a while since I have touched this code, I have approached my custom model task in a slightly different way.
For this, I have created a new folder within the repo, and a completely new page just to prove that I can creat a custom model
to access these, you must have to manually enter in '/custom_model' for the pages to render. After the custom_model is defined, to
access each data it should follow by 'nft' and a number. Right now there's only 2 since resubmission. However you can add your own
through the admin panel.

Go to /custom_model/nft/1 to see the first ever data added to my custom model.
Example

Due to secerity Breach of Heroku recently, I had to make a new exclusive super user for the heroku deployed site.

Login details:

User : superadmin
Password : superuserpass

alienatedsoftware-forth_milestone_ai_shop_mayresub's People

Contributors

alienatedsoftware avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.