Giter Club home page Giter Club logo

flipster's Introduction

Flipster

About Client Side

This is a brief overview of the technologies used in the project client. The client was built on react + typescript, which are popular and powerful frameworks for creating web applications. React allows for creating reusable components and managing the user interface, while typescript adds static typing and other features to javascript. Vite was used as the project builder, which is a fast and modern tool that supports hot module replacement, code splitting, and other optimizations. The redux tool kit was used for state management, which is a library that simplifies the use of redux and provides useful utilities such as reducers, actions, selectors, and middleware. Query caching was implemented in the client to increase performance, which means that the client stores the results of previous requests and reuses them when possible. RTK Query was used to cache requests, which is a plugin for the redux tool kit that provides an easy way to define and use API endpoints. SignalR client (web socets) was used for chats, which is a library that enables real-time communication between the client and the server using web sockets or other protocols. For form validation react hook form was used, which is a library that leverages react hooks to handle form data and validation. For drop-down lists react select was used, which is a library that provides customizable and accessible select components. Swiper was used for sliders, which is a library that supports touch gestures, navigation, pagination, and other features for creating responsive sliders.

Stack

  • React, React-select, React-hook-form
  • TypeScript, JavaScript
  • Redux toolkit
  • Swiper
  • Signalr-client

About Server Side

The project's backend was built with c# dotnet core. The system design followed the distributed monolith pattern, which allows for modular development and deployment. The modules communicate through the contracts class, which defines the interfaces for each module. The project uses an inMemory database for fast testing purposes. However, this database should be replaced by a more reliable and persistent one after the project is installed and tested.

Application structure

Stack

  • C#, .NET, ASP.NET Core
  • Ef Core, Automapper,
  • Modular Monolith,
  • SignalR

APIs

Auth APIs

POST api/auth/visit/
POST api/auth/login/
POST api/auth/register/
POST api/auth/logout/
POST api/auth/refresh/

Users APIs

GET api/users/
GET api/users/:userId/
GET api/users/my/
DELETE api/users/my/
PUT api/users/my/change-password/
PUT api/users/my/my/change-avatar/
PUT api/users/my/change-settings/

Locations APIs

GET api/locations/

Favorites APIs

POST api/favorites/
GET api/favorites/ids/
GET api/favorites/

Favorites APIs

POST api/favorites/
GET api/favorites/ids/
GET api/favorites/

Recomendations APIs

GET api/catalog/recommendations/ids/
GET api/catalog/recommendations/

Recomendations APIs

GET api/catalog/recommendations/ids/
GET api/catalog/recommendations/

Categories APIs

GET api/categories/

Catalog APIs

GET api/catalog/
POST api/catalog/
GET api/catalog/:advertId/
DELETE api/catalog/:advertId/
PUT api/catalog/:advertId/

Chats APIs

POST api/chats/
GET api/chats/
DELETE api/chats/:chatId/

Messages APIs

GET api/chats/:chatId/messages/

Quick Start

You must have yarn, dotnet, vite installed to run the application

Clone repository

git clone https://github.com/Bazl1/Flipster.git
cd ./Flipster

Quick Start Server Side

cd server/src/Flipster.WebApi
dotnet run

Quick Start Server Client

cd client/
yarn
yarn dev

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.