Developing Snap N Shop Using Dot Net and Angular

Priyanshu Chaurasiya

23 days ago

Developing Snap N Shop Using Dot Net and Angular
Leaving your home for a job in another city is quite difficult, right?
But you know what’s even more difficult? Leaving your tech stack and suddenly migrating to a completely new one! Yes, that’s exactly what happened to me.
Hello and welcome to my blog, I am Priyanshu Chaurasiya. Recently, I joined Coforge as my first employer, and I’ve been assigned to .NET Fullstack, a domain that was completely new to me, something I had never explored before.
The good thing is, I got over a month of training to get familiar with the stack, and by the end of the training, we had to make a project. In this blog, I’m going to talk about that project. If you want to know more about the .NET training itself, leave a comment below, maybe I’ll write a separate blog on that!, Let’s dive into Snap N Shop.

About Snap N Shop

During the training, groups of 4–5 members were created, and each group had to make 3 projects. My teammates were Pawan Kumar Mishra, Nidhi Gupta, and Sakshi Tyagi.
We decided that instead of everyone contributing to each of the 3 projects, it would be better if everyone built their project individually to get a hands-on experience of fullstack development with .NET.
I chose to build an E-commerce application and named it Snap N Shop.

Features

If you’ve read my previous blogs, you know my experience has mostly been in the Node.Js ecosystem. So, for this project, my goal wasn’t to build something extraordinary, it was to get my hands dirty with .NET.
Here are the key features:
  1. Authentication: Customers can sign in using their email and receive an OTP.
  2. Product Listing: Browse hundreds of products on the platform.
  3. Category Filter: Filter products category-wise.
  4. Search: Quickly search for your desired product using the search bar.
  5. Cart Management: Add items to your cart and manipulate quantities.
  6. Order History: View all your previous orders.
Pretty basic, but exactly what I needed to learn fullstack development in .NET.

Tech Stack

Switching tech stacks can be frustrating, and this one was no exception. Since it was my first time in .NET, there were definitely some challenges.
Here’s what I used:
  • Backend: C#, ASP.NET Core API
  • Frontend: Angular, Tailwind CSS
  • Database: MS SQL Server
  • Other tools: Docker, NuGet, AWS Route 53, Render, Vercel
It was a lot to learn at once, but that’s what makes it exciting!

Challenges & Learnings

Here comes the interesting part — the frustrating yet rewarding moments I faced while building this project.

Switching to a completely new tech stack

Coming from 2–3 years of experience in Node.Js, diving into .NET was not easy. But I kept reminding myself:
  1. I had no options, the company assigned me this stack.
  2. This is a chance to learn something completely new, add skills to my toolkit, and open doors for the future.

Understanding database management

I had only worked with NoSQL before, with a brief attempt at PostgreSQL. Coming back to SQL databases, I struggled initially with ORM, schema design, and relationships.
The key? Practice, patience, and time to absorb the concepts.

Debugging issues in a new ecosystem

Debugging was tough because my fundamentals in C# and .NET were new. Errors I’d never seen before popped up constantly.
What helped me:
  • Writing organized code
  • Using try-catch blocks and better error handling
  • Writing readable error messages
  • Tools like ChatGPT and Gemini

Managing time and learning pace

The training lasted just a month. Learning fullstack development in a completely new tech while making a functional project in such a short time was hard.
Office hours ate most of my day, leaving barely 3 hours for self-study, so weekends became my productivity goldmine.
Read about my recruitment process at Coforge
favicon
Coforge Recruitment Journey from Application to Offer - Hey Sainty

Follow my Coforge on-campus placement journey—from application to offer. Get real interview questions, tips, and insights to help freshers prepare

Local Setup

If you are a developer and want to run the project locally, here’s how you can:

Clone the repository

git clone https://github.com/iamsainty/Snap-N-Shop

Server setup

cd Snap-N-Shop-API

Install the required packages

dotnet restore

Add secrets using

dotnet user-secrets list

Required secrets

SmtpSettings:Username =
SmtpSettings:Password =
ResendAPIKEY =
JwtSettings:SecretKey =
JwtSettings:Issuer =
JwtSettings:Audience =
ConnectionStrings:DefaultConnection =

Run the project 

dotnet watch run

The server will run on 0.0.0.0:80. Make sure MS SQL Server is active on your system.

Client setup

cd Snap-N-Shop-Client

Install required packages

npm install

Run the project

ng serve

The Angular frontend will run on http://localhost:4200.

If you face any issues running it locally, drop a comment below — I’ll try to help.

Project Demonstration

So I’ve talked a lot about the project, but how does it actually look?
You must be excited to check it out, right? Click here to view the live version:
favicon
Snap N Shop - Ecommerce Platform

Snap N Shop is an ecommerce platform, you can browse hundreds of products from different categories and brands.

https://snap-n-shop.vercel.app/
That’s it for Snap N Shop — my first .NET Fullstack project.
It was challenging, frustrating, exciting, and extremely rewarding. I learned a new tech stack, database management, debugging skills, and how to manage time efficiently.
I hope you enjoyed reading about my journey, and even if the project isn’t perfect, I’d love to hear your feedback in the comments, what’s good, what can be improved, or any suggestions for future projects.
See you in the next blog! Thank you for stopping by.

Comments

Have something to share?

Join the conversation by signing in below!

Recent Comments

No comments yet, Start the conversation!