Pet Palace

Description

This is a Fullstack Pet Store project built using;

• React 18

• ASP.NET Core WebAPI (.NET 7)

• TypeScript

The project serves as a platform to collect and manage pet Store items details such as title, brand....etc.

Also we've completed following sections within this simple CRUD application.

• On Backend Project - Entities, Dtos, Context, ORM, Http Methods, Swagger, Postman, Postman Collection

• On Frontend Project - Sending state while redirecting user, Nested Routing, useState, useEffect, Sweet Alert on Create,Edit and Delete, Confimation on Delete, Fully Responsive Navbar, TypeScript Interface, Typescript Partial, Axios, SASS, Mixins, Moment

Solution Architecture

---

Pet_Store Backend

Nuget Packages

Microsoft.AspNetCore.OpenApi Microsoft.EntityFrameworkCore.Design Microsoft.EntityFrameworkCore.SqlServer Microsoft.EntityFrameworkCore.Tools

To add migrations

add-migration initial

update-database

Pet_Store Frontend

here you can get commands for setting up the front end development environment for a Pet Store project.

Extensions within VS code:

ES7 React/Redux/GraphQL/React-Native snippets

Prettier - Code formatter

To start a new Create React App project with TypeScript, you can run:

npx create-react-app my-app --template typescript

To add css file visit npmjs site >>> https://www.npmjs.com/package/sass

npm i sass

To add Material UI to project visit this site >>> https://mui.com/material-ui/getting-started

npm install @mui/material @emotion/react @emotion/styled

To add material UI icons to there

npm install @mui/icons-material

To navigate between different components or pages

npm i react-router-dom

To install npm axios

npm i axios

To add notifications/alert

npm i sweetalert2

for parsing, validating, manipulating, and displaying dates and times

npm i moment