This is multi-product and multi-vendor ecommerce website. it has complex product category system that can be fully control from admin dashboard. also it has a lot of store like mobiles, laptops, televisions, you can easily find any product. .


      
Dream Bazar is Multi-Product and Vendor Ecommerce website. It has admin dashboard route, seller dashboard, and shopping site separately

Project Directory
- client [client side]
- client/public/static [static directory for development mode]`

- server [server side]
- server/public/static [static directory and client bundle for production mode]


### This Application under development

Live Link [upcoming preview]()


## Application Features
- Multiple language system (currently bangla and english)
- Dark and light mode system.
- Social Facebook, Google and Password based Authentication using passport and jwt.
- Reset password via sending email using nodemailer
- Multiple Category system
- Multiple vendor system. also multiple store for seller.
- Customer Dashboard. customer manage their order, payment, shipping addresses, cart item and profile.
- Admin Dashboard. admin can manage product, brands, category etc
  like added, update, delete. manage customer orders, order cancellation



### I build a lot of reusable ui components. To avoid extra UI library component

## Technology used
- React18
- Typescript
- Redux, react-redux (for manage state)
- React-router-dom6 (Route base code spliting)
- React-context-api + useReducer (mange some state)
- Tailwindcss
- swiper (for product slider)
- Sass
- Expressjs
- Mongodb(native)
- sqlite(SQL database) for manage categories and brands
- formidable
- bcryptjs for password hashing
- jsonwebtoken
- passportjs
- http-serverless function for netlify deploy


        

story-sharing is a multi-author blogger website, Here you can publish your posts with markdown editor also you can like, comment other posts. It support dark mod.

Story Sharing is a multi writer blogger website. Here writer can write their own story/post, they can other writer post like, comment,
In This Project build I use Nodejs, React and Mongodb, Redis as a caching storage


Live Link https://story-sharing.netlify.app


## Application Features
- Multiple writer can writer own post. also have user and admin role. admin can access everything.
- User can create account with google, facebook, or and email/password base system.
- Implement nice network data loading skeleton.
- user they can recover password if forgot.
- user have a dashboard, there they can see all post that written by them.
also user can update their profile information line avatar, cover photo, name, email, password.
- buyer can order, add wishlist, and see their past all transaction.
- Other Side a seller can add/update, delete product. they can manage their product.
- And admin can block a writer.
- For security, I use route middle that check user role everytime when they move different route.
 if they are not permitted then simply them push home or login route
 
 
- Also, user can quickly find blog post by search


## Technology used.

- Reactjs
- redux
- react-redux
- react-router-dom
- Tailwindcss
- react-markdown-editor
- react-transition-group
- sass
- highlight.js
- react-helmet
- fortawesome
- axios






### Preview screenshot

Social App is social media website inspited by Facebook.com, it realtime social website, user can share their posts, user can reaction, comment on other posts, also they can live private chat.

### To build I uses
- NodeJS
- Expressjs
- Tailwindcss
- React
- Redux-toolkit
- Pusher (realtime communication between client and server)
- Mongodb
- SCSS
- etc...
# Facebook Clone social media


## This Application is currently under development
Live Link https://social-app2.netlify.app/

Phone Mela is Ecommerce website, In this website we can find smartphone by search, filter any attributes, also added mobile your wishlist, cart and buy.


Phone Mela is Online buying best smartphone. In this website customer can find smartphone, search mobile phone using title,
filter with varies attributes.
Customer can added mobile wishlist, cart, also they can buy with credit card and cash on delivery build with Nodejs, React js and Mongodb


## Application Features
- Search mobile phone using title, filter with varies attributes.
- It has multiple role customer and admin, customer can buy products. Also has customer and admin dashboard.
- Admin user can add product, update, delete. Block customer.
- Customer can add mobile in wish list, cart, also they can buy with credit card.



## Technology used.
- react
- redux
- react-router-dom (Route base code spliting)
- Tailwindcss
- stripe-payments
- expressjs
- mongoose
- formidable
- jsonwebtoken etc....


```js

const productRoutes = (app: Application)=> {
	app.get("/api/products", controllers.productController.fetchProducts)
	app.post("/api/homepage-products", controllers.productController.fetchHomePageProducts)
	app.post("/api/top-wishlist-products", controllers.productController.topWishlistProducts)
	app.post("/api/add-product", admin, controllers.productController.addProduct)
}
const authRoutes = (app: Application)=> {		
	app.post("/api/signup", controllers.authController.userRegistration)
	app.post("/api/sign-in", controllers.authController.login)
	app.get("/api/sign-current-user", controllers.authController.loginCurrentUser)
}
const orderRoutes = (app: Application)=> {		
	app.post("/api/order", controllers.orderController.createOrder)
	app.post("/api/orders", controllers.orderController.fetchOrders)
	app.get("/api/order/:orderId", controllers.orderController.fetchOrder)
}
const wishlistRoutes = (app: Application)=> {
	app.post("/api/wishlist-products", auth, controllers.wishlistController.fetchWishlistProducts)
	app.post("/api/add-wishlist", auth, controllers.wishlistController.addToWishlist)	
	app.post("/api/remove-wishlist", auth, controllers.wishlistController.removeToWishlist)
}
const shippingAddressRoutes = (app: Application)=> {
	app.get("/api/shipping-addresses/:customer_id", auth, controllers.shippingAddressController.getShippingAddress)
	app.post("/api/shipping-address", auth, controllers.shippingAddressController.addShippingAddress)
}
const cartRoutes = (app: Application)=> {		
	app.post("/api/cart-products", auth, controllers.cartController.fetchCartProducts)
	app.post("/api/add-cart", auth, controllers.cartController.addToCart)
	app.post("/api/remove-cart", auth, controllers.cartController.removeToCart)
}
// and much more routing
```

    
        

movie-lovers free movie watch website, There users can watch movies, added into favorite list. also they can request for favorite movies. Users can change their profile like profile photo, name, and password using OTP code.


## Free Movie Watcher Site  movie-lovers

# Live Link: https://movie-lovers.netlify.app


Online Free Movie streaming website build with react, deisyUI, redux-toolkit,
expressjs, mongodb and much more


## Features

- OTP base and password based authentication.

- Reset password

- Movie Pagination

- Movie Filter by Genres, Quality, Language

- Movie search by Title

- Movie add to Favorite

- User Dashboard.

- Profile Updater and avatar Upload

- Movie Adding Feature only admin user.

- Movie delete only admin user.

- User can delete their Account.

- Contact Email sending

- All form validation



Technology used.

- react
- redux-toolkits
- react-router-dom (Route base code spliting)
- daisyUI (tailwindcss)
- expressjs
- mongoose
- formidable
- jsonwebtoken etc....


        
        

A secondhand watch shop online market. user can buy secondhand watch and seller can sell their used watches

### admin user
Email: admin@admin.com \
password: 123456

### seller user
Email: raju@sarker.com \
password: 123456

### buyer user
Email: test@buyer.com \
password: 123456



## Application Features
- Multiple roles base. such as Buyer. Seller, Admin.
- For internation payment system. I use stripe. so buyer can pay with credit card.
- Implement user-friendly all form validator (custom my own).
- buyer can log in via google or email & password. they can recover password if forgot.
- buyer can order, add wishlist, and see their past all transaction.
- Other Side a seller can add/update, delete product. they can manage their product.
- And admin can do anything like she can delete any seller and buyer.
- For security, I use route middle that check user role everytime when they move different route.
 if they are not permitted then simply them push home or login route
 
 
- And also render dashboard sidebar link based on role.
- Also user can quickly find product by search




## Work Outline

- In top has a responsible Navigation that has some page link. And condition rendering if user logged then render auth
 image and a dropdown that has dashboard, logout


- Create routing, I use react-router-dom. and create private route with role based like BUYER, SELLER, ADMIN


- We have two authentication system email/password based and google account based.

- Homepage has some product category, and click to jump category products page there has all product that include this category.
- Homepage also have advertises product section that seller mark for advertise. if no one seller mark any product as advertise then this section will be hidden.
- In Dashboard page show auth user profile information, and sidebar show all auth route it dependent user role.

- a public blogs pages has some interview question


## Technology used.

- Reactjs
- react-router-dom
- @tanstack/react-query
- Tailwindcss
- Firebase
- stripe
- react-hot-toast
- react-helmet
- react-spinners
- react-icons
- swiper
- date-fns
- axios

A online banking site. There user can money transfer loan to another Account. Pay monthly EMI. also they can deposit money with 5% annual interest

## ExtremeBank (CLIENT)
### A online banking site
## Repo: https://github.com/rasel-mahmud-dev/extreme-bank/tree/with-monogdb/client
## Live: https://extreme-bank.web.app/


### test user
Email: rasel.mahmud.dev@gmail.com
password: 12345

## Application Features
- user can create own account and bank account.
- customer can send money to anther user account via account no
- Implement user-friendly form validator (custom).
- Customer can take loan for study business, house purpose with 10% annual interest,
- They not able to take another loan it they not complete current loan all EMI.
- Also they can deposit money (annual rate 5% interest)
 
 
- This site implementation more feature continuously...


## Technology used.
- Reactjs
- react-router-dom
- Tailwindcss
- Firebase
- stripe
- react-spinners
- react-icons
- swiper
- axios



# ExtremeBank (Backend + With Mongodb)

#### Mongodb has free cloud service. since mysql free service gone to deep sleep and api return error. That why I also create mongodb version of this site api

## Repo: https://github.com/rasel-mahmud-dev/extreme-bank/tree/with-mongodb
## Live: https://extreme-bank.vercel.app


## Functional requirement.
- customer can create their account. also they can create their bank account with account no 16 digit.
- customer can send money to other user account no.
- customer can take money loan with 10% annual interest.
 (This calculation implement with simple interest formula) A*(1+(r*t))
 
 
- customer submit EMI for current month or future month. customer can't take another loan
 if they already take a loan, not paid all EMI.
-



## Database.
- Mongodb (Native)

## Packages uses.
- Expressjs
- cors
- dotenv
- jwt(jsonwebtoken)
- bcryptjs
- mongodb database
- winston logger

#### Auth/User endpoint
- [POST] api/v1/auth/login user login
- [POST] api/v1/auth/registration user registration
- [GET] api/v1/auth/current-auth fetch current logged user
- [GET] api/v1/auth/logout logout current user delete cookie from browser


#### Account endpoint
- [POST] api/v1/account create a bank account
- [GET] api/v1/account [account detail for logged user]
- [GET] api/v1/account/peoples transactions able peoples
- [GET] api/v1/account/transactions all transactions for logged user
- [POST] api/v1/account/transactions make new money transactions
- [GET] api/v1/account/loans get all past all loans history
- [POST] api/v1/account/loan-money create a load
- [GET] api/v1/account/emis get all monthly emi for current logged user
- [POST] api/v1/account/submit-emi submit a monthly emi
- And Much more...


        
## BiodataList Management (Client)



### Live: https://biodata-management.netlify.app
### Repo: https://github.com/rasel-mahmud-dev/biodatalist-management-client
### Backend: https://github.com/rasel-mahmud-dev/biodatalist-management-server

## Requirement

### Summary
This is a biodata management services, here user can find peoples for their marriage,
User can put their public bio data.
Also They can filter people bio data via lot of biodata attribute

### Features
- User can filter biodata
- Login / Registration also User can login with Google Account
- All Input Validation
- User can add their biodata
- Advance Filter biodata
- Advance Address chooser Input multi-step country, division, district and upzila.
- Admin Dashboard panel
- User Dashboard panel
- Sidebar list item change dynamically when change role
- Protected Route
- Custom Accordion Component
- Custom Pagination Component


### Packages
- Nextjs
- Redux-Toolkit + RTK query
- React-hook-form
- Tailwindcss
- Scss



### State management
- Redux-toolkit
- RTK query


### Routes
- Navigation
- Login / Registration Route
- / Home page: Visitor can search biodata using filter
- /biodata/filter: Visitor filter biodata
- /biodata/id: biodata detail
- /users/edit-biodata: User edit biodata
- /admin: Admin dashboard for Admin Role
- /admin/users: all users  for Admin Role
- /admin/all-biodata: all biodata  for Admin Role
- and much more...



## BiodataList Management (Backend)


### Packages
- Typescript
- Nodejs
- Expressjs
- Joi (validator)
- Jsonwebtoken
- i18next(internationalization)
- bcryptjs
- passport
- mongodb


## Requirement

## Database
- Mongodb (Native driver)


## Models

### User
- _id
- username
- avatar
- email
- password
- createdAt

### Biodata
- _id
- gender: string
- maritalStatus: boolean
- createdAt: Date
- userId: ObjectID (Reference User Collection)
- age: number
- birthDay: Date
- bloodGroup: string
- height: number
- occupation: string
- nationality: string
- nationality?: string
- occupation?: string
- phone?: string
- fatherName?: string
- isFatherAlive?: string
- educationMethod?: string
- presentAddress?: Address
- permanentAddress?: Address
- isCompleted?: string

### Roles
- CUSTOMER
- ADMIN


### Routes

### Auth Route
- [GET] api/auth/login
- [GET] api/auth/registration
- [GET] api/auth/fetch-current-auth

### Biodata Route
- [GET] api/biodata  => get all public biodatas
- [POST][PRIVATE] api/biodata  ==> create biodata
- [GET][ADMIN] api/biodata/all  ==> get all biodata


### Users Route
- [GET][ADMIN] api/users  ==> get all users



        


        
Javascript Refresh is javascript tutorial based website. It render by server, ejs template engine that is multi-page architecture, and page load on 2G network also seo optimized


## Application Features
- server Technology: nodejs, sass, expressjs, ejs(template engine), markdown, SQLite(database)
- JavaScript Refresh is JavaScript learner document based website, It render on server side with ejs nodejs template engine.
- Visitor can refresh their JavaScript knowledge to read article.
- It has varies category and sub-category

### Live Link: https://javascript-refresh.vercel.app


## Technology used.
- VanilaJs
- Nodejs
- expressjs
- Sass
- ejs(template engine)
- markdown(marked)
- SQLite(database)


        


    
Lens queen a photography services website. People can hire me for for various kind of shooting photography and also user can review.


## Features
- Implement user friendly all form validator.
- user can login via their google account or email & password.
- user can reset password if they forgot it.
- users/customer can see all my services that I provide.
- They can see all review that are provide review by other user for my service.
- Only logged user can give reviews for a service also.
- In /my-reviews page only logged can see own all reviews.
- Authenticated user also can add, update, delete service.
- user see all reviews for a particular service and also only logged user can add, delete, update reviews



## Work Outline

- In top has a responsible Navigation that has some page link. And condition rendering if user logged then render auth
 image and a dropdown that has logout add service, my reviews logout item.

- Create routing, I use react-router-dom. and create private route like add-service, my-reviews.

- Also Create non auth-visible route like login and registration. if user already logged than he can not visit login and registration page unless he logout

- We have two authentication system email/password based and google account based.

- Homepage fetch three photography services, and has some worked projects and testimonials. all data contains in mongodb database.
  Using Api request these data are fetched.

- We have services route that show all my photography services, that are store in mongodb services collections.
  and user can paginate and change per Page show data. also each service has delete and edit button, authenticate use can delete and update services.

- In service Detail page, show all details about service and show all review descending order by create time.

- In Blogs pages has some interview question


## Technology used.

- Reactjs
- react-router-dom
- Tailwindcss
- Firebase
- react-toastify
- react-helmet
- react-spinners
- react-photo-view
- react-transition-group
- react-icons
- swiper
- axios

        


       
  Solid Ecommerce is a ecommerce website, that build with Solidjs And firebase Backend In this website we can find prouduct by search, filter with attributes, also added cart.


## Application Features
- User can add product in his cart and buy products.
- There two implement role, one customer and admin.
- Admin can product add, delete, update.


### Live Link: https://solidjs-ecommerce.web.app/


## Technology used.
- Typescript
- SolidJs
- Firebase
- FireStore
- context-api
- firebase authentication
        
        


       
       
Highly performance and professional clean UI design, server side render nextjs app
  
  
## Application Features
- Admin panel.
- Upload project from admin dashboard.
- Store user visitor data.
- Add post from admin dashboard.
- Mail send.

### Live Link: https://rasel-portfolio.vercel.app/


## Technology used.
- Typescript
- Nextjs
- Mongodb
- Redis (cache blogs)
- Context-api
- nextjs api jwt authentication
        
        



Typing-Fun is a type learning web app. it help these people who are related to programming or coding, and they type randomly with few finger. To learn proper typing in this application help you so much
Typing.com inspired me to make this web application.

[Live live https://rsl-typing-fun.netlify.app](https://rsl-typing-fun.netlify.app)

## Application Features
- A lot of lesson,
- Dynamic Hand for all keys.
- Count accuracy and wpm after completion.
- Enable keypress sound

### Technology I uses

- Reactjs,
- Tailwindcss,
- Scss,
- react-router-dom@6
- React Context Api for State managment
- Code Splitting with React lazy loading
-

       

Ganna is an online music listener app. it use for listen any music. also has
multiple album artist, album.
User can create their account and save to playlist.

NB: [This project under Development]

## Functional requirement.
- registration user
- add to favorite list
- add to custom playlist
- user dashboard
- admin dashboard
- admin add artists, playlist, new song


# CLIENT
## Functional requirement.
- Navigation bar
- Homepage
- Player [desktop in bottom]
- login page
- registration page
- user dashboard [ANY USER]
 - favorite list
 - playlists
 - change password form
 - change avatar
 - avatar
- admin dashboard [ONLY FOR ADMIN]
 - add new song
 - update song
 - delete song
 - delete user
 - add artist
 - add genre
 - add playlist for everyone

# BACKEND
## Functional requirement.
- Local Authentication.
 - Hash password
 - Email verification
 - Forgot password.
 - block user
- Add song user favorite list.
- add song to new playlist.
- Admin can add, delete, update song
- Admin also can add genres, albums, artists, playlist,

## Database requirement.
- MySql


## Functional analysis.
### Models

**Artist**
- artistId
- name
- email
- avatar
- createdAt
- updatedAt


**HitArtist** [view count of artist ]
 - id
 - artistId
 - views


**AlbumId** [song album]
- name
- cover
- createdAt


**CategoryAlbumId**
- name
- cover
- createdAt

**Genre**
 - genreId
 - name
 - createdAt

**Song**
 - songId
 - title
 - duration
 - categoryAlbumId
 - albumId => albumId[]
 - artistId => ArtistId[]
 - createdAt
 - updatedAt
 - cover
 - url
 - genreId => GenreId[]

**HitSong** [count play times song]
 - id
 - songId
 - views

**User**
 - userId
 - firstName
 - lastName
 - username
 - email
 - password
 - createdAt
 - updatedAt
 - avatar
 - role: Admin, User


**Profile**
- userId
- favoriteSinger: []

**Playlist** [create playlist]
- playlistId
- name
- userId
- userId // null for admin created Playlist
- songId = []

**Favorites**
- favoriteId
- userId
- songId
- createdAt


### Endpoint

User endpoint
 - POST /auth/login [public]
 - POST /auth/registration [public]
 - PATCH /auth/profile/:profileId [private]
 - PUT /auth/change-password [private]
 - PATCH /auth/change-avatar [private]
 
Admin endpoint
 - GET /admin/users [private]
 - POST /admin/user [private]
 - PATCH /admin/userId [private]
 - DELETE /admin/userId [private]


Genres endpoint
- GET /genres
- POST /genres/add-genre [private]
- PATCH /genres/genreId [private]
- DELETE /genres/genreId [private]


Artist endpoint
- GET /artists
- POST /artists/add-artist [private]
- PATCH /artists/artistId [private] update artist
- DELETE /artists/artistId [private]


Favorite endpoint
- GET /favorite/all [private]
- POST /favorite [private]
- PATCH /favorite/favoriteId [private]
- DELETE /favorite/favoriteId [private]

Simple multi category ecommerce mobile application build with React Native, Redux-toolkits, Tailwindcss

I'm Rasel Mahmud

web developer

About ME

A little description

Hi, I am Rasel.

Skills

skills are achievement.

Core Skills

Javascript

Typescript

Nodejs

React

NextJS

ReduxJS

SASS

Mongodb

MYSQL

Technology that I uses

With familiar

Tools

SERVICE OFFERS

What Services you will Get from me!

WEB DESIGN

My Projects

Recent works

Blog Posts

My Latest Blog Posts

Posts Fetch fail

Contact Me

GET IN TOUCH

Quick Contact

Rajshahi Bangladesh

Email

Visitor stats

Powered by Rasel

Copyright © 2024 . All Rights Reserved