GarageSale

Access Live Demo 🌐

A full-stack responsive ecommerce marketplace built with React and Django. The application allows user to have an option to become seller and create their own shops. Users are able to create and add products to shops and is also able to shop for products. Django default Auth model are being extended to include the buyer and seller usertypes.

Customised caurosel on Homepage
Product Filtering by Color and Sorting by Prices
Three different User types - Buyer, Seller and Admin
Seller is able to create Shops and Add products to Shop
All user has a user profile which allows them to upload profile images
All images are being stored on Amazon S3
Paypal check out payment capability

Main Tech Stack:

ReactJS - front end
Redux - state management
DjangoRestFrameowork - backend API
NodeJS - npm package management
PostsgreSQL - relational database
Paypal API - check out Payment Gateway
Amazon S3 - storage of product images
Heroku - deployment together with gunicorn webserver

Styled using a mixed of the following:

Styled-components
CSS Flexbox
React-bootstrap (Container, Rows, Columns)
Material UI (for some Icons)
TailWind CSS (used some classNames for inline margins and paddings offset)

Authorisation & Authentication:

JWT Tokens
Set Local Storage

Extending Django User Model:

# models.py
class UserType(models.Model):
    id = models.AutoField(primary_key=True, editable=False)
    user = models.OneToOneField(User,on_delete=models.SET_NULL, null=True)
    is_seller = models.BooleanField(default=False)
    is_buyer = models.BooleanField(default=False)
    bio = models.TextField(null=True, blank=True)
    profile_image = models.ImageField(default='images/noAvatar.png',null=True, blank=True)
    cover_image = models.ImageField(default='images/userCoverImage.jpg',null=True, blank=True)

    @receiver(post_save, sender=User)
    def create_user_type(sender, instance, created, **kwargs):
        if created:
            UserType.objects.get_or_create(user=instance)

    @receiver(post_save, sender=User)
    def save_user_type(sender, instance, **kwargs):
        instance.usertype.save()

    def __str__(self):
        return str(self.user)

# serializers.py
class UserSerializer(serializers.ModelSerializer):
    name = serializers.SerializerMethodField(read_only=True)
    isAdmin = serializers.SerializerMethodField(read_only=True)
    usertype = serializers.SerializerMethodField(read_only=True)

    class Meta:
        model = User
        fields = ['id', 'username', 'email', 'name', 'isAdmin', 'date_joined', 'usertype']

    # customised default is_staff to isAdmin
    def get_isAdmin(self, obj):
        return obj.is_staff

    #customised usertype to include seller and buyer
    def get_usertype(self,obj):
        usertype = obj.usertype
        serializer = UserTypeSerializer(usertype, many=False)
        return serializer.data

MVP:

The MVP will have the essential features of an ecommerce applications such as:

Shop Products by Categories
Filter Products by colors and sort by prices
Add 3 user type - Buyer(by default), Seller(by choice), Admin
Shop Products by Shops
Add to Cart Feature
Check out Feature
Paypal payment gateway

User Persona & Onboarding Journey:

To-do Checklist:

Future Development:

Some Learning Points

Key commands for future reference

To launch frontend

cd client
npm start

For backend

# python, django, postgresql
sudo service postgresql start
pipenv run python manage.py runserver
pipenv run python manage.py runmigrations
pipenv run python manage.py migrate

gohyiqian/MyGarageSale