Abacus - easy checkout

Abacus is an ecommerce platform that let you purchase items easily using a powerful payment technology called Square.

Comment

Inspiration

What inspired us to work on Abacus was Amazon.com, a platform that make e-commerce so seamless and efficient. But I plan to expand and make Abacus the Amazon of Africa.

App ID: sandbox-sq0idb-txZ8zkdr6lVrxJRtaG6imQ

What it does

Abacus is an e-commerce platform that let you purchase items easily using a powerful payment technology called Square and its all done seamlessly. It gives users the best user experience and easy access using googles OAuth. The goal is to bring the physical market online and make online shopping a lot more interactive.

How we built it

Backend We started with the backend using Nodejs, Typescript, Zod, Express, MongoDB, Mongoose, CI/CD and Postman. Before kicking off, we created a system design for the backend architecture and I used a Monolithic Architecture (I did this because of time and to save cost). Next we wrote the architectural design for the authentication flow for both the admin and signed In users, created models, schema, controllers and services for the Api's, developed routes and handled validation with Zod.

More on the OAuth, we used google OAuth and wrote everything from scratch without using any library. Then we designed models for admin, users, products, order, and handling user session for both admin and users. Created controllers for admin, users, products, order, sessions and for handling payments. We pretty much did the same for schemas but In the services it handled different functions like creating account, creating products and sessions. We developed API routes for creating account, orders, Square Checkout Payment API, creating products, deleting and more.

For hashing and Authentication we used bcrypt and JWT (this was to generate a token used in admin and users authentication.

We also created some libraries for omitting, connecting to database and handling logs. All user data was saved in MongoDB even hashed data.

Now it was time to deploy the backend. We used heroku and integrated CI/CD with github. Deployment went successful after some hours of debugging. The backend and frontend are running on different servers and it was scalable plus efficient.

Frontend We developed the Frontend using ReactJS, Typescript, Redux, Redux-persist, TailwindCSS, Firebase and Google Cloud Platform. Then we jumped right in with my UI design (thanks to tailwindCSS). Next we wrapped the with redux and used redux persist to make my data persistent then created routes for both admin area and the client side. Each part of the app has its own authentication workflow the admin area uses a normal process with email and password while the client uses googles OAuth.

Then we finished up with the app layout managed state with redux (where I made most of my api request to the backend server). Now the web app was looking clean, so we integrated add to cart functionality, remove from cart, get cart total, render cart and made api calls to the backend for handling payment with the Square Api.

On the frontend we also created some libraries from scratch: Truncate, googleAuth and AuthToken.

More on the admin area, we created a dashboard for the admin that has the actions to add products with different categories, delete products and handle users that have registered on the client area.

Now the app was looking lively and fully functional. It was time to deploy but before that we made sure to manage Oauth redirection, and app URI's on Google Cloud Platform. Then we deployed to Firebase (this was quite easy because we have a good knowledge of Firebase).

Challenges we ran into

The first challenge we had was handling cookies on the Frontend, This was very difficult because of the heroku server so we changed my deployment for the Frontend to firebase (We think we can try something else still). Then we had a bug while implementing OAuth (the issue was that my app was not redirecting to the main app after the Oauth content screen).

Accomplishments that we're proud of

I proud that we were able to face most of our challenges and debug our way through it. In all it was an interesting experience.

What we learned

We learned a lot on how to write system design, manage authentication flow and Integrate Square Checkout payment API

What's next for Abacus - Shopping made easy

The next step is to allow users shop on Abacus using crypto currencies directly from their wallets without having to covert to fait. We plan to integrate services that would make this a seamless process for users.

Share this project:

Updates