This Site

I coded this site myself. No Wordpress!



E-Commerce Website

I coded this whole thing by hand! It was a solo project to build an e-commerce website for my full stack development bootcamp.

    TL;DR

    • Goal: Code client and server sides using a database, encrypted login/profile, cart and checkout.
    • Deliverables: Site architecture, UI design, all code, database, prototype, and deploy.
    • Role: Full Stack Developer
    ***GITHUB***

    Stack:

    EXTENDED

    Site Architecture

    This was coded in 3 phases. First, I started with an internal product file to setup the frontend. Then, I created and tested the backend before connecting the two. Lastly, I created a Mongo database with admin and vendor privileges as well as the ability to add and delete data. Below shows the site architecture of Phase 1.

    User Flow : React Redux

    Shoppers select a product card from the home page. They go to the product page complete with reviews, pricing, are shown whether it is in stock, and quantity drop-down. After they add to cart, a blue number appears on the homepage. When shoppers click, they can see all items in their cart.

    Profiles

    Customers can securely login thanks to Bcrypt tokens. There is also a separate sign in for Admins. I used a Redux store to program the events for sign in, shipping, payment screen, and order screen.

    Challenges

    It was hard to keep up in class real-time, so I re-watched the class videos and built this slowly so I would understand what I was doing. I also deployed this originally on what was supposed to be a free Heroku plan, but they started charging, so I am working on integrating it with Vercel.

    Conclusion

    Building an e-commerce site from scratch is no easy feat. It is one of the most complicated sites to build and I can now see why. Now that I've built the most difficult site I am prepared to take on sites of all kinds.




Eventlite Site

Full stack development bootcamp group project.

    TL;DR

    • Goal: Code site for people to find events near them. Connect event APIs with user
    • My Deliverables: All frontend site design including color, type, and layout. Redux store setup using MVC design.
    • Role: Fullstack Developer

    Check it out:

    Github code or YouTube Demo

    Stack:



    EXTENDED

    UI Design

    I used Bootswatch CSS integration to design this app. The custom bright orange color was borrowed from the existing Eventbrite App which I used as a model for the project. I chose a complimentary blue-ish purple color to highlight location information and make it easy to read for accessible audiences.


    For the event cards, I used an orange banner to call attention to free events in the top left of each card. I also made sure everything was aligned for responsive design. Below shows the event selection process and adding it to the cart.

    USER FLOW : React Redux

    The steps for this site were Sign Up/Sign In > Shipping > Payment > Place Order. Each of these components had to be built, then connected with server and database for storage, then routed for access, and then displayed client side in browers. I ensured there were try/catch blocks for each step so that I could figure out where errors were coming from and were also properly formatted to be displayed to users so they would understand what to do if there was an error.

    STEPS:

    1. Users create a profile which is securely stored in MongoDB. I used Bcrypt authentication for putting hashed passwords into the database for storage and getting for verification. I used Postman to check that the data was able to be accessed. 2. They enter their shipping information which also gets securely stored for future purchases.

    3. For payment, I integrated the app with with Paypals' API for brand recognition and user trust. They also have the option to pay with credit card if preferred or do not have a Paypal account.

    4. Once tickets are ordered and paid for, users recieve a confirmation of their order.

    Challenges

    This was a team project with 4 people. Each week one person would take a turn as the Scrum Master and lead the weeks' stand ups as well as control the product backlog. The others would figure out the schedule and who would do what. Several weeks before the project was due, one team member dropped out of the bootcamp. To manage this, the remaining 3 of us met and divided that person's remaining tasks among us in order to stay on schedule and complete the project.

    Conclusion

    Overall this was a fun project, especially working with other people.We were able to get a lot done quickly and debugging was easier with multiple people examining it and testing the code.