11 | {count}
12 |
13 | )
14 | }
15 |
16 | export default ButtonBadge
17 |
--------------------------------------------------------------------------------
/server/src/product/dto/product-filter.dto.ts:
--------------------------------------------------------------------------------
1 | import { ApiProperty } from '@nestjs/swagger';
2 | import { IsOptional, IsNotEmpty, IsNumber } from 'class-validator';
3 |
4 | export class ProductFilterDto {
5 | @ApiProperty()
6 | @IsOptional()
7 | @IsNotEmpty()
8 | Manufacturer: string;
9 |
10 | @ApiProperty()
11 | @IsNumber()
12 | @IsOptional()
13 | @IsNotEmpty()
14 | 'Refresh Rate': number;
15 | }
16 |
--------------------------------------------------------------------------------
/frontend/src/components/Image/Image.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | import styles from './Image.module.css'
4 | interface Props {
5 | url: string
6 | imageIsLazy?: 'eager' | 'lazy'
7 | }
8 |
9 | const Image: React.FC
16 | alert('click')}>
17 |
18 | )
19 | }
20 |
--------------------------------------------------------------------------------
/frontend/postcss.config.json:
--------------------------------------------------------------------------------
1 | {
2 | "plugins": [
3 | "postcss-custom-properties",
4 | "postcss-nested",
5 | "postcss-flexbugs-fixes",
6 | [
7 | "postcss-preset-env",
8 | {
9 | "autoprefixer": {
10 | "flexbox": "no-2009",
11 | "grid": "autoplace"
12 | },
13 | "stage": 3,
14 | "features": {
15 | "custom-properties": true
16 | }
17 | }
18 | ]
19 | ]
20 | }
21 |
--------------------------------------------------------------------------------
/frontend/.storybook/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | plugins: {
3 | 'postcss-import': {},
4 | 'postcss-preset-env': {
5 | stage: 3,
6 | autoprefixer: {
7 | flexbox: 'no-2009',
8 | grid: 'autoplace',
9 | features: {
10 | 'custom-properties': true,
11 | },
12 | },
13 | },
14 | 'postcss-nested': {},
15 | 'postcss-custom-properties': {},
16 | 'postcss-flexbugs-fixes': {},
17 | },
18 | }
19 |
--------------------------------------------------------------------------------
/frontend/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 | "arrowParens": "avoid",
3 | "bracketSpacing": true,
4 | "endOfLine": "lf",
5 | "htmlWhitespaceSensitivity": "css",
6 | "insertPragma": false,
7 | "jsxBracketSameLine": false,
8 | "jsxSingleQuote": false,
9 | "printWidth": 120,
10 | "proseWrap": "always",
11 | "quoteProps": "as-needed",
12 | "requirePragma": false,
13 | "semi": false,
14 | "singleQuote": true,
15 | "tabWidth": 2,
16 | "trailingComma": "all",
17 | "useTabs": false
18 | }
19 |
--------------------------------------------------------------------------------
/frontend/src/components/Button/ButtonBadge.module.css:
--------------------------------------------------------------------------------
1 | .container {
2 | position: relative;
3 | right: 0;
4 | }
5 | .counter {
6 | border: 1px solid #fadde1;
7 | position: absolute;
8 |
9 | background-color: var(--c-bg-secondary);
10 | color: #ff5d8f;
11 |
12 | font-weight: 700;
13 | text-align: center;
14 |
15 | top: -29px;
16 | right: -18px;
17 |
18 | font-size: 0.825rem;
19 | width: 1rem;
20 | height: 1rem;
21 | border-radius: 1rem;
22 |
23 | line-height: 18px;
24 | }
25 |
--------------------------------------------------------------------------------
/frontend/src/components/Animations/Animations.ts:
--------------------------------------------------------------------------------
1 | export const easing = [0.6, -0.05, 0.01, 0.99]
2 | export const stagger = {
3 | animate: {
4 | transition: {
5 | staggerChildren: 0.05,
6 | },
7 | },
8 | }
9 | export const fadeInUp = {
10 | initial: {
11 | y: 60,
12 | opacity: 0,
13 | transition: { duration: 0.6, ease: easing },
14 | },
15 | animate: {
16 | y: 0,
17 | opacity: 1,
18 | transition: {
19 | duration: 0.6,
20 | ease: easing,
21 | },
22 | },
23 | }
24 |
--------------------------------------------------------------------------------
/server/src/utils/filters.ts:
--------------------------------------------------------------------------------
1 | export const listOfNotCalculate = [
2 | 'Part',
3 | 'Type',
4 | 'Dimensions',
5 | 'Battery Capacity',
6 | 'Battery Life',
7 | 'CPU Microarchitecture',
8 | 'SSD Storage',
9 | 'SSD Type',
10 | 'Storage',
11 | 'Front Facing Webcam',
12 | 'Images',
13 | 'Name',
14 | 'GPU Memory',
15 | 'Model',
16 | 'Screen Surface Finish',
17 | 'HDD Storage',
18 | 'Rear Facing Webcam',
19 | '_id',
20 | 'SellerName',
21 | 'Seller',
22 | '0',
23 | 'CPU Boost Clock',
24 | 'CPU Core Clock',
25 | ];
26 |
--------------------------------------------------------------------------------
/server/.gitignore:
--------------------------------------------------------------------------------
1 | .env
2 |
3 | # compiled output
4 | /dist
5 | /node_modules
6 |
7 | # Logs
8 | logs
9 | *.log
10 | npm-debug.log*
11 | yarn-debug.log*
12 | yarn-error.log*
13 | lerna-debug.log*
14 |
15 | # OS
16 | .DS_Store
17 |
18 | # Tests
19 | /coverage
20 | /.nyc_output
21 |
22 | # IDEs and editors
23 | /.idea
24 | .project
25 | .classpath
26 | .c9/
27 | *.launch
28 | .settings/
29 | *.sublime-workspace
30 |
31 | # IDE - VSCode
32 | .vscode/*
33 | !.vscode/settings.json
34 | !.vscode/tasks.json
35 | !.vscode/launch.json
36 | !.vscode/extensions.json
--------------------------------------------------------------------------------
/frontend/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2 |
3 | # dependencies
4 | /node_modules
5 | /.pnp
6 | .pnp.js
7 |
8 | # testing
9 | /coverage
10 |
11 | # next.js
12 | /.next/
13 | /out/
14 |
15 | # production
16 | /build
17 |
18 | # misc
19 | .DS_Store
20 |
21 | # debug
22 | npm-debug.log*
23 | yarn-debug.log*
24 | yarn-error.log*
25 |
26 | # local env files
27 | .env.local
28 | .env.development.local
29 | .env.test.local
30 | .env.production.local
31 |
32 | cypress/videos
33 | cypress/screenshots
34 |
--------------------------------------------------------------------------------
/server/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "skipLibCheck": true,
4 | "module": "commonjs",
5 | "declaration": true,
6 | "removeComments": true,
7 | "emitDecoratorMetadata": true,
8 | "experimentalDecorators": true,
9 | "allowSyntheticDefaultImports": true,
10 | "target": "es2017",
11 | "sourceMap": true,
12 | "outDir": "./dist",
13 | "baseUrl": "./",
14 | "incremental": true
15 | },
16 | "include": ["src/**/*"],
17 | "exclude": ["node_modules"],
18 | "typeRoots": ["node_modules/@types"]
19 | }
20 |
--------------------------------------------------------------------------------
/frontend/src/components/Layout/SiteLayout.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import Header from '../Header/Header'
3 |
4 | import cx from 'classnames'
5 | import styles from './site-layout.module.css'
6 | import { FilterContextProvider } from 'src/context/FilterContext/FilterContext'
7 |
8 | const SiteLayout: React.FC = ({ children }) => {
9 | return (
10 |
11 |
12 |
15 |
16 | )
17 | }
18 |
19 | export default SiteLayout
20 |
--------------------------------------------------------------------------------
/frontend/jest.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | collectCoverageFrom: ['**/*.{js,jsx,ts,tsx}', '!**/*.d.ts', '!**/node_modules/**'],
3 | setupFilesAfterEnv: ['
9 |
10 |
11 |
12 |
17 | )
18 | }
19 |
20 | export default CardSkeleton
21 |
--------------------------------------------------------------------------------
/server/.eslintrc.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | parser: '@typescript-eslint/parser',
3 | // parserOptions: {
4 | // project: './tsconfig.json',
5 | // sourceType: 'module',
6 | // },
7 | plugins: ['@typescript-eslint/eslint-plugin'],
8 | extends: [
9 | 'plugin:@typescript-eslint/eslint-recommended',
10 | 'plugin:@typescript-eslint/recommended',
11 | 'prettier',
12 | 'prettier/@typescript-eslint',
13 | ],
14 | root: true,
15 | env: {
16 | node: true,
17 | jest: true,
18 | },
19 | rules: {
20 | '@typescript-eslint/interface-name-prefix': 'off',
21 | '@typescript-eslint/explicit-function-return-type': 'off',
22 | '@typescript-eslint/no-explicit-any': 'off',
23 | },
24 | };
25 |
--------------------------------------------------------------------------------
/server/src/user/dto/user.dto.ts:
--------------------------------------------------------------------------------
1 | import { ApiProperty } from '@nestjs/swagger';
2 | import { IsNotEmpty, IsString, MaxLength, Matches } from 'class-validator';
3 |
4 | export class UserDto {
5 | @ApiProperty()
6 | @IsNotEmpty()
7 | @MaxLength(30)
8 | @IsString()
9 | name: string;
10 |
11 | @ApiProperty()
12 | @Matches(/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/, {
13 | message: 'E-Mail is not valid.',
14 | })
15 | @IsNotEmpty()
16 | email: string;
17 |
18 | @ApiProperty()
19 | addresses: [
20 | {
21 | addressName: string;
22 | city: string;
23 | country: string;
24 | address: string;
25 | },
26 | ];
27 |
28 | @ApiProperty()
29 | phone: number;
30 |
31 | @ApiProperty()
32 | shoppingCart: string[];
33 | }
34 |
--------------------------------------------------------------------------------
/frontend/src/components/Chip/Chip.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | import styles from './Chip.module.css'
4 |
5 | interface Props {
6 | category: string
7 | value: string
8 | onClick: (event: React.MouseEvent
13 |
14 |
15 |
16 |
14 | {leftIcon && (
15 |
25 | )
26 | }
27 |
28 | export default Chip
29 |
--------------------------------------------------------------------------------
/frontend/src/components/Button/Button.stories.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | import IconButton from './IconButton'
4 |
5 | import UserIcon from '../Icons/UserIcon'
6 | import CartIcon from '../Icons/CartIcon'
7 | import ButtonBadge from './ButtonBadge'
8 | import Button from './Button'
9 |
10 | export default {
11 | component: Button,
12 | title: 'Button',
13 | }
14 | export const Default = () => {
15 | return
16 | }
17 | export const User = () => (
18 |
16 | {leftIcon}
17 |
18 | )}
19 |
20 |
21 |
24 | {category}
22 | {value}
23 |
16 |
,
23 | document?.getElementById('__next') as HTMLElement,
24 | )
25 | }
26 |
27 | export default Modal
28 |
--------------------------------------------------------------------------------
/frontend/cypress/plugins/index.ts:
--------------------------------------------------------------------------------
1 | import 'cypress'
2 |
3 | // ***********************************************************
4 | // This example plugins/index.js can be used to load plugins
5 | //
6 | // You can change the location of this file or turn off loading
7 | // the plugins file with the 'pluginsFile' configuration option.
8 | //
9 | // You can read more here:
10 | // https://on.cypress.io/plugins-guide
11 | // ***********************************************************
12 |
13 | // This function is called when a project is opened or re-opened (e.g. due to
14 | // the project's config changing)
15 |
16 | /**
17 | * @type {Cypress.PluginConfig}
18 | */
19 |
20 | module.exports = (on: any, config: any) => {
21 | // `on` is used to hook into various events Cypress emits
22 | // `config` is the resolved Cypress config
23 | }
24 |
--------------------------------------------------------------------------------
/server/src/auth/auth.controller.ts:
--------------------------------------------------------------------------------
1 | import { Controller, Post, Body, ValidationPipe } from '@nestjs/common';
2 | import { AuthService } from './auth.service';
3 | import { AuthCredentialsDto } from './dto/auth-credentials-dto';
4 |
5 | @Controller('auth')
6 | export class AuthController {
7 | constructor(private readonly authService: AuthService) {}
8 |
9 | @Post('/register')
10 | async register(
11 | @Body(ValidationPipe) authCredentialsDto: AuthCredentialsDto,
12 | ): Promise<{ accessToken: string }> {
13 | return await this.authService.register(authCredentialsDto);
14 | }
15 |
16 | @Post('/login')
17 | async login(
18 | @Body('password') password: string,
19 | @Body('email') email: string,
20 | ): Promise<{ accessToken: string }> {
21 | return await this.authService.login(password, email);
22 | }
23 | }
24 |
--------------------------------------------------------------------------------
/frontend/.storybook/preview.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { addDecorator } from '@storybook/react'
3 |
4 | import Router from 'next/router'
5 | import { RouterContext } from 'next/dist/next-server/lib/router-context'
6 |
7 | export const parameters = {
8 | actions: { argTypesRegex: '^on[A-Z].*' },
9 | }
10 |
11 | import '../styles/app.css'
12 | import './storybook.css'
13 |
14 | addDecorator(Story => {
15 | Router.router = {
16 | route: '/',
17 | pathname: '/',
18 | query: {},
19 | asPath: '/',
20 | push: () => {},
21 | prefetch: () => new Promise((resolve, reject) => {}),
22 | }
23 | return (
24 |
17 |
20 | {children}
21 |
22 |
26 |
28 |
14 | mockFunction()}
16 | removeOneFromCart={async () => mockFunction()}
17 | isInCart={true}
18 | id="1"
19 | image="https://m.media-amazon.com/images/I/41FSyBId9TL.jpg"
20 | name={`Asus ROG Mothership GZ700 17.3\" 1920 x 1080 144 Hz Core i9-9980HK 2.4 GHz 64 GB Memory 1.5 TB NVME SSD Storage Laptop`}
21 | price="6499"
22 | >
23 |
24 | )
25 | }
26 |
27 | export const List = () => {
28 | return
16 |
25 | )
26 | }
27 |
28 | export default Sidebar
29 |
--------------------------------------------------------------------------------
/frontend/src/components/Spinner/Spinner.module.css:
--------------------------------------------------------------------------------
1 | @keyframes rotate {
2 | from {
3 | -webkit-transform: rotate(0deg);
4 | transform: rotate(0deg);
5 | }
6 | to {
7 | -webkit-transform: rotate(360deg);
8 | transform: rotate(360deg);
9 | }
10 | }
11 | .spinner {
12 | font-size: 10px;
13 | border-top: 0.5rem solid rgba(29, 161, 242, 0.2);
14 | border-right: 0.5rem solid rgba(29, 161, 242, 0.2);
15 | border-bottom: 0.5rem solid rgba(29, 161, 242, 0.2);
16 | border-left: 0.5rem solid #1da1f2;
17 | -webkit-transform: translateZ(0);
18 | -ms-transform: translateZ(0);
19 | transform: translateZ(0);
20 | animation: rotate 1.1s infinite linear;
21 | border-radius: 50%;
22 | width: 5em;
23 | height: 5em;
24 | margin: 0 auto;
25 |
26 | margin-top: 10%;
27 | margin-bottom: 100%;
28 | }
29 | .spinner:after {
30 | border-radius: 50%;
31 | width: 5em;
32 | height: 5em;
33 | }
34 |
--------------------------------------------------------------------------------
/server/src/product/interfaces/product.interface.ts:
--------------------------------------------------------------------------------
1 | import { Document, Types } from 'mongoose';
2 |
3 | export interface Product extends Document {
4 | Model: string;
5 | Part: string;
6 | Seller: Types.ObjectId;
7 | SellerName: string;
8 | 'Screen Size': string;
9 | 'Screen Panel Type': string;
10 | Resolution: string;
11 | 'Refresh Rate': string;
12 | Dimensions: string;
13 | Weight: number;
14 | 'CPU Core Count': number;
15 | 'CPU Core Clock': string;
16 | 'CPU Boost Clock': string;
17 | Memory: number;
18 | CPU: string;
19 | 'CPU Microarchitecture': string;
20 | 'SSD Storage': string;
21 | 'SSD Type': string;
22 | Storage: string;
23 | GPU: string;
24 | 'GPU Memory': number;
25 | 'Operating System': string;
26 | 'SD Card Reader': string;
27 | 'Front Facing Webcam': string;
28 | Images: [];
29 | Name: string;
30 | Price: number;
31 | Manufacturer: string;
32 | }
33 |
--------------------------------------------------------------------------------
/frontend/src/components/Icons/TrashIcon.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | import styles from './icon.module.css'
4 |
5 | interface Props {
6 | iconWidth?: string
7 | iconHeight?: string
8 | }
9 | const TrashIcon = ({ iconWidth = '24', iconHeight = '24' }: Props) => {
10 | return (
11 |
22 | )
23 | }
24 |
25 | export default TrashIcon
26 |
--------------------------------------------------------------------------------
/server/src/user/user.module.ts:
--------------------------------------------------------------------------------
1 | import { Module } from '@nestjs/common';
2 | import { UserController } from './user.controller';
3 | import { UserService } from './user.service';
4 | import { MongooseModule } from '@nestjs/mongoose';
5 | import { userSchema } from './user.schema';
6 | import { AuthModule } from 'src/auth/auth.module';
7 | import { ProductModule } from 'src/product/product.module';
8 | import { productSchema } from 'src/product/product.schema';
9 | import { JwtModule } from '@nestjs/jwt';
10 |
11 | @Module({
12 | imports: [
13 | ProductModule,
14 | MongooseModule.forFeature([
15 | { name: 'user', schema: userSchema },
16 | { name: 'product', schema: productSchema },
17 | ]),
18 | AuthModule,
19 | JwtModule.register({
20 | secret: process.env.JWT_SECRET,
21 | }),
22 | ],
23 | controllers: [UserController],
24 | providers: [UserService],
25 | })
26 | export class UserModule {}
27 |
--------------------------------------------------------------------------------
/frontend/src/components/ProductListHeader/ProductListHeader.module.css:
--------------------------------------------------------------------------------
1 | .container {
2 | max-width: 850px;
3 | height: max-content;
4 | margin: 0 auto;
5 | margin-bottom: 1rem;
6 | padding: 0.5rem;
7 |
8 | border: 2px solid var(--c-border);
9 | border-radius: 8px;
10 |
11 | display: flex;
12 | justify-content: flex-start;
13 | align-items: center;
14 | flex-wrap: wrap;
15 |
16 | & > div {
17 | margin: 0.25rem 0.25rem;
18 | }
19 | .button {
20 | cursor: pointer;
21 | margin-left: 1rem;
22 | font-weight: 700;
23 | font-size: 0.75rem;
24 |
25 | padding: 0.5rem;
26 | border-radius: 4px;
27 |
28 | color: var(--c-primary);
29 | background: var(--c-bg-secondary);
30 |
31 | transition: border var(--a-60-cubic);
32 | border: 2px solid var(--c-bg-secondary);
33 | &:hover {
34 | color: var(--c-text-on-p);
35 | background: var(--c-primary-light);
36 | }
37 | }
38 | }
39 |
--------------------------------------------------------------------------------
/frontend/src/components/Logo/Logo.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | import cx from 'classnames'
4 | import styles from './logo.module.css'
5 | import { useFilterContext } from 'src/context/FilterContext/FilterContext'
6 | import { useRouter } from 'next/router'
7 |
8 | interface Props {
9 | className?: string
10 | }
11 | const Logo: React.FC29 | Computer Store 30 |
31 | ) 32 | } 33 | 34 | export default Logo 35 | -------------------------------------------------------------------------------- /frontend/src/components/Icons/SearchIcon.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | import styles from './icon.module.css' 4 | 5 | interface Props { 6 | iconWidth?: string 7 | iconHeight?: string 8 | } 9 | const SearchIcon = ({ iconWidth = '24', iconHeight = '24' }) => { 10 | return ( 11 | 23 | ) 24 | } 25 | 26 | export default SearchIcon 27 | -------------------------------------------------------------------------------- /frontend/pages/auth/index.tsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react' 2 | 3 | import styles from './index.module.css' 4 | import AuthForm from '../../src/components/Form/AuthForm' 5 | import Button from 'src/components/Button/Button' 6 | 7 | const Login = () => { 8 | const [activePage, setActivePage] = useState<'Log in' | 'Sign up'>('Log in') 9 | return ( 10 |
11 |
25 | )
26 | }
27 |
28 | export default Login
29 |
--------------------------------------------------------------------------------
/frontend/src/components/Dropdown/Dropdown.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { useFilterContext } from 'src/context/FilterContext/FilterContext'
3 | import styles from './Dropdown.module.css'
4 |
5 | const Dropdown = () => {
6 | const { filterDispatch } = useFilterContext()
7 | const handleChangeSelect = (event: React.ChangeEvent
12 |
19 |
22 |
23 |
12 |
29 |
30 | )
31 | }
32 |
33 | export default CheckIcon
34 |
--------------------------------------------------------------------------------
/frontend/styles/app.css:
--------------------------------------------------------------------------------
1 | @import 'variables.css';
2 |
3 | * {
4 | margin: 0;
5 | padding: 0;
6 | border: 0;
7 | font: inherit;
8 | }
9 |
10 | html {
11 | font-size: 16px;
12 | line-height: 1;
13 | }
14 |
15 | body {
16 | -webkit-font-smoothing: subpixel-antialiased;
17 | font-kerning: normal;
18 | text-rendering: optimizeLegibility;
19 | font-size: 1rem;
20 |
21 | font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif,
22 | 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
23 |
24 | background-color: var(--c-bg-primary);
25 | color: var(--c-text);
26 | }
27 |
28 | #__next {
29 | width: 100%;
30 | }
31 |
32 | input[type='checkbox'] {
33 | cursor: pointer;
34 | }
35 | label {
36 | cursor: pointer;
37 | user-select: none;
38 | }
39 | a {
40 | color: unset;
41 | text-decoration: none;
42 | appearance: none;
43 | cursor: pointer;
44 | }
45 | a:focus {
46 | outline: none;
47 | }
48 | a:active,
49 | a:hover {
50 | outline: 0;
51 | }
52 |
53 | dialog {
54 | display: flex;
55 | justify-content: center;
56 | align-items: center;
57 | }
58 | dialog::backdrop {
59 | background: rgba(0, 0, 0, 0.25);
60 | }
61 |
--------------------------------------------------------------------------------
/server/src/user/user.schema.ts:
--------------------------------------------------------------------------------
1 | import * as mongoose from 'mongoose';
2 | import * as bcrypt from 'bcrypt';
3 | import { productSchema } from 'src/product/product.schema';
4 |
5 | export const userSchema = new mongoose.Schema({
6 | name: {
7 | type: String,
8 | required: true,
9 | },
10 | password: {
11 | type: String,
12 | required: true,
13 | select: false,
14 | },
15 | email: {
16 | type: String,
17 | required: true,
18 | unique: true,
19 | },
20 | addresses: [
21 | {
22 | addressName: {
23 | type: String,
24 | },
25 | city: {
26 | type: String,
27 | },
28 | country: {
29 | type: String,
30 | },
31 | address: {
32 | type: String,
33 | },
34 | },
35 | ],
36 | phone: {
37 | type: Number,
38 | },
39 | shoppingCart: [{ type: mongoose.Schema.Types.ObjectId, ref: 'product' }],
40 |
41 | orders: { type: [productSchema], select: false },
42 | });
43 |
44 | userSchema.methods.validatePassword = async function (
45 | enteredPassword: string,
46 | hashedPassword: string,
47 | ): Promise4 | Computer Store 5 |
6 | 7 | > 🚨 This is not a commercial project. I did it to improve my knowledge ❤ 8 | > 9 | 10 | 🚀 [Live Demo](https://computer-store.vercel.app/) 11 | 12 | # Tech Stack 13 | Frontend 14 | - React / Next.js 15 | - Typescript 16 | - PostCSS 17 | - Storybook 18 | 19 | Backend 20 | - Nest.js / Express 21 | - Typescript 22 | - MongoDB / Mongoose 23 | - JSON Web Tokens 24 | 25 | 26 | 27 | # How to use 28 | ### Quick Start 29 | ```bash 30 | clone repo 31 | cd frontend && yarn dev 32 | cd server && yarn start:dev 33 | ``` 34 | 35 | This project uses atlas as database service and uses JWT for auth. 36 | To use these systems, simply enter the necessary variables in the .env file. 37 | 38 | 39 | How to use MongoDB Atlas -> https://docs.atlas.mongodb.com/getting-started 40 | 41 | 42 | ` 43 | .env file location = computer-store/server/.env 44 | ` 45 | ``` 46 | MONGODB_URI=mongodb+srv://
30 | {sidebar && (
31 |
47 |
48 | )
49 | }
50 |
51 | export default Home
52 |
--------------------------------------------------------------------------------
/frontend/src/components/CheckBox/Checkbox.module.css:
--------------------------------------------------------------------------------
1 | .label {
2 | font-size: 0.875rem;
3 | text-align: center;
4 |
5 | width: 100%;
6 |
7 | display: flex;
8 | justify-content: flex-start;
9 | align-items: center;
10 |
11 | transition: background-color var(--a-60-cubic);
12 |
13 | &:hover,
14 | &:focus-within {
15 | background-color: var(--c-bg-secondary);
16 | }
17 | }
18 | .input {
19 | appearance: none;
20 | height: 1rem;
21 | width: 1.125rem;
22 |
23 | background-color: var(--c-bg-primary);
24 | border: 2px solid var(--c-bg-secondary-dark);
25 | border-radius: 2px;
26 |
27 | outline: none;
28 |
29 | transition: border var(--a-60-cubic);
30 |
31 | &:hover,
32 | &:focus {
33 | border: 2px solid var(--c-bg-secondary-darker);
34 |
35 | + .text {
36 | color: black;
37 | }
38 | }
39 |
40 | &:checked {
41 | background-color: var(--c-primary);
42 | border: 2px solid var(--c-primary);
43 | }
44 | &:checked::after {
45 | content: '';
46 | }
47 | }
48 |
49 | .input::after {
50 | display: inline-block;
51 | position: relative;
52 | top: -2px;
53 | right: -2px;
54 |
55 | height: 8px;
56 | width: 4px;
57 | transform: rotate(45deg);
58 | border-bottom: 3px solid var(--c-text-on-p);
59 | border-right: 3px solid var(--c-text-on-p);
60 | }
61 |
62 | .info {
63 | width: 100%;
64 | display: flex;
65 | flex-direction: row;
66 | justify-content: space-between;
67 | align-items: center;
68 | padding: 0 0.5rem;
69 | }
70 | .text {
71 | width: 100%;
72 | display: block;
73 | display: -webkit-box;
74 | -webkit-line-clamp: 1;
75 | text-align: left;
76 | overflow: hidden;
77 | -webkit-box-orient: vertical;
78 | }
79 | .count {
80 | font-size: 0.825rem;
81 | color: var(--c-text-secondary);
82 | opacity: 0.8;
83 | }
84 |
--------------------------------------------------------------------------------
/frontend/src/components/Card/Card.module.css:
--------------------------------------------------------------------------------
1 | .item {
2 | cursor: pointer;
3 | position: relative;
4 | padding: 1rem;
5 | padding-top: 0;
6 |
7 | transition: border var(--a-60-cubic);
8 | border: 2px solid transparent;
9 |
10 | &:hover {
11 | border: 2px solid var(--c-primary-light);
12 | }
13 | background: var(--c-bg-secondary);
14 | border-radius: 8px;
15 | box-shadow: 0 1px 2px var(--shadow);
16 | }
17 |
18 | .container {
19 | width: 100%;
20 | height: 100%;
21 |
22 | display: flex;
23 | flex-direction: column;
24 | justify-content: flex-start;
25 | align-items: center;
26 |
27 | & > img {
28 | flex: 1;
29 | width: 100%;
30 | object-fit: contain;
31 | object-position: center;
32 | }
33 | }
34 |
35 | .name {
36 | width: 100%;
37 | display: block;
38 | display: -webkit-box;
39 | -webkit-line-clamp: 2;
40 | text-align: left;
41 | overflow: hidden;
42 | -webkit-box-orient: vertical;
43 |
44 | margin-top: 1rem;
45 | }
46 | .footer {
47 | margin-top: 1rem;
48 | width: 100%;
49 | display: flex;
50 | flex-direction: row;
51 | justify-content: space-between;
52 | align-items: center;
53 | }
54 | .price {
55 | text-align: left;
56 | font-weight: 700;
57 | font-size: 1.125rem;
58 | }
59 |
60 | .button {
61 | cursor: pointer;
62 | font-weight: 700;
63 | font-size: 13px;
64 | padding: 0.5rem;
65 | border-radius: 4px;
66 |
67 | color: var(--c-text);
68 | background: var(--c-bg-secondary);
69 |
70 | transition: border var(--a-60-cubic);
71 | border: 2px solid var(--c-bg-secondary);
72 | &:hover {
73 | color: var(--c-text-on-p);
74 | background: var(--c-primary-light);
75 | }
76 | }
77 |
78 | .color_pink {
79 | color: #f56a79;
80 | &:hover {
81 | color: var(--c-text-on-p);
82 | background: #f56a79;
83 | }
84 | }
85 |
--------------------------------------------------------------------------------
/frontend/pages/_document.tsx:
--------------------------------------------------------------------------------
1 | import Document, { Html, Head, Main, NextScript, DocumentContext } from 'next/document'
2 |
3 | class MyDocument extends Document {
4 | static async getInitialProps(ctx: DocumentContext) {
5 | const initialProps = await Document.getInitialProps(ctx)
6 | return { ...initialProps }
7 | }
8 |
9 | render() {
10 | return (
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
32 |
33 |
34 |
35 | {
34 | setSideBar(false)
35 | }}
36 | >
37 | )}
38 |
39 | {!filters ?
41 |
42 |
43 |
46 |
26 |
27 | {Object.keys(checkboxList).length > 10 ? (
28 | setSearchTerm(e.currentTarget.value)}
35 | >
36 | ) : (
37 |
38 | )}
39 |
55 | )
56 | }
57 |
58 | export default CheckboxList
59 |
--------------------------------------------------------------------------------
/frontend/src/components/Sidebar/SidebarSkeleton.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import styles from './SidebarSkeleton.module.css'
3 |
4 | const SidebarSkeleton = () => {
5 | return (
6 |
40 | {Object.keys(checkboxList).map((e: string) => {
41 | if (e.toLowerCase().includes(searchTerm.toLowerCase())) {
42 | return (
43 |
54 |
7 |
8 |
17 |
18 |
26 |
27 |
35 |
36 |
44 |
45 | )
46 | }
47 |
48 | export default SidebarSkeleton
49 |
--------------------------------------------------------------------------------
/frontend/src/components/Header/Header.module.css:
--------------------------------------------------------------------------------
1 | .header {
2 | grid-area: header;
3 | padding: 0 1rem;
4 | display: flex;
5 | justify-content: flex-start;
6 | align-items: center;
7 | }
8 |
9 | .logo {
10 | margin-right: 1rem;
11 | }
12 |
13 | .search {
14 | margin-left: auto;
15 | }
16 |
17 | .btn_group {
18 | margin-left: auto;
19 | display: flex;
20 | justify-content: center;
21 | align-items: center;
22 | }
23 | .btn_login {
24 | white-space: nowrap;
25 | background: var(--c-bg-secondary);
26 | border: 1px solid rgba(0, 0, 0, 0.1);
27 | padding: 1rem 1rem;
28 | margin: 0 1rem;
29 | &:hover {
30 | background: var(--c-primary-light);
31 | color: var(--c-text-on-p);
32 | }
33 | }
34 | .btn_user {
35 | &:focus-within,
36 | &:active {
37 | .btn_logout {
38 | pointer-events: all !important;
39 | visibility: visible !important;
40 | opacity: 1 !important;
41 | position: absolute !important;
42 | }
43 | }
44 | & > .btn_logout {
45 | pointer-events: none;
46 | visibility: hidden;
47 | opacity: 0;
48 | cursor: pointer;
49 | position: absolute;
50 | box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
51 | transition: all 300ms cubic-bezier(0.25, 0.8, 0.25, 1);
52 | z-index: 99;
53 | padding: 0.5rem;
54 | border-radius: 0.5rem;
55 | background: var(--c-bg-secondary-dark);
56 | color: var(--c-text-on-p);
57 | border: 1px solid var(--c-shadow);
58 | }
59 | }
60 |
61 | @media only screen and (max-width: 800px) {
62 | .search {
63 | order: 5;
64 | flex-basis: 100%;
65 | margin-top: 8px;
66 | }
67 | .header {
68 | height: max-content;
69 | align-items: center;
70 | flex-wrap: wrap;
71 | }
72 | }
73 | @media only screen and (max-width: 550px) {
74 | .header {
75 | justify-content: center;
76 | }
77 | .btn_group {
78 | margin: 0.5rem 0;
79 | padding-right: 1.2rem;
80 | }
81 | .logo {
82 | margin: 0;
83 | }
84 | .search {
85 | margin-top: 0;
86 | }
87 | }
88 |
--------------------------------------------------------------------------------
/frontend/pages/_home/index.module.css:
--------------------------------------------------------------------------------
1 | .body {
2 | grid-area: body;
3 |
4 | display: grid;
5 | grid-template-columns: 220px 1fr;
6 | grid-template-areas: 'sidebar content';
7 |
8 | @media (max-width: 900px) {
9 | display: flex;
10 | flex-direction: column;
11 | .sidebar {
12 | overflow: auto;
13 | overflow-x: hidden;
14 | will-change: transform;
15 | position: fixed;
16 | width: 75%;
17 | height: 100%;
18 |
19 | transition: transform 190ms cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0s;
20 | transform-origin: 1px;
21 | transform: translateX(-100%);
22 | z-index: 100;
23 | background: var(--c-bg-primary);
24 | padding-top: 0px;
25 | padding: 0px;
26 | left: 0;
27 | top: 0;
28 | padding-right: 1rem;
29 |
30 | &::-webkit-scrollbar {
31 | width: 8px;
32 | padding: 0;
33 | background-color: #fff;
34 | }
35 | &::-webkit-scrollbar-thumb {
36 | border-radius: 8px;
37 | background-color: #ccc;
38 | }
39 | &::-webkit-scrollbar-track {
40 | border-radius: 10px;
41 | background-color: #eee;
42 | }
43 |
44 | & > div {
45 | box-shadow: none;
46 | border: none;
47 | }
48 | }
49 | .sidebar_open {
50 | transform: translateX(0);
51 | }
52 | }
53 | }
54 |
55 | .sidebar {
56 | grid-area: sidebar;
57 | }
58 |
59 | .content {
60 | grid-area: content;
61 | }
62 |
63 | .sidebar_background {
64 | content: '';
65 | position: fixed;
66 | opacity: 0.5;
67 | top: 0;
68 | left: 0;
69 | z-index: 99;
70 | background: black;
71 | height: 100%;
72 | width: 100%;
73 | }
74 |
75 | .btn_set_sidebar {
76 | position: fixed;
77 | top: 0;
78 | left: 0;
79 | padding: 0.5rem;
80 | background: var(--c-pale-pink);
81 | border-top-right-radius: 1rem;
82 | border-bottom-right-radius: 1rem;
83 |
84 | display: none;
85 | z-index: 3;
86 | @media (max-width: 900px) {
87 | display: inline-block;
88 | }
89 | }
90 |
--------------------------------------------------------------------------------
/frontend/public/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "short_name": "computer store",
3 | "name": "store",
4 | "lang": "en",
5 | "description": "Best Place to Buy Computer",
6 | "start_url": "/",
7 | "background_color": "#ffffff",
8 | "theme_color": "#51c2d5",
9 | "dir": "ltr",
10 | "display": "standalone",
11 | "orientation": "portrait",
12 | "icons": [
13 | {
14 | "src": "icons/icon-512x512.png",
15 | "type": "image/png",
16 | "sizes": "192x192"
17 | },
18 | {
19 | "src": "icons/icon-192x192.png",
20 | "type": "image/png",
21 | "sizes": "192x192"
22 | },
23 | {
24 | "src": "icons/icon-180x180.png",
25 | "type": "image/png",
26 | "sizes": "180x180"
27 | },
28 | {
29 | "src": "icons/icon-152x152.png",
30 | "type": "image/png",
31 | "sizes": "152x152"
32 | },
33 | {
34 | "src": "icons/icon-144x144.png",
35 | "type": "image/png",
36 | "sizes": "144x144"
37 | },
38 | {
39 | "src": "icons/icon-120x120.png",
40 | "type": "image/png",
41 | "sizes": "120x120"
42 | },
43 | {
44 | "src": "icons/icon-114x114.png",
45 | "type": "image/png",
46 | "sizes": "114x114"
47 | },
48 | {
49 | "src": "icons/icon-96x96.png",
50 | "type": "image/png",
51 | "sizes": "96x96"
52 | },
53 | {
54 | "src": "icons/icon-76x76.png",
55 | "type": "image/png",
56 | "sizes": "76x76"
57 | },
58 | {
59 | "src": "icons/icon-72x72.png",
60 | "type": "image/png",
61 | "sizes": "72x72"
62 | },
63 | {
64 | "src": "icons/icon-60x60.png",
65 | "type": "image/png",
66 | "sizes": "60x60"
67 | },
68 | {
69 | "src": "icons/icon-57x57.png",
70 | "type": "image/png",
71 | "sizes": "57x57"
72 | },
73 | {
74 | "src": "icons/icon-32x32.png",
75 | "type": "image/png",
76 | "sizes": "32x32"
77 | },
78 | {
79 | "src": "icons/icon-16x16.png",
80 | "type": "image/png",
81 | "sizes": "16x16"
82 | }
83 | ],
84 | "prefer_related_applications": "false"
85 | }
86 |
--------------------------------------------------------------------------------
/server/src/user/user.controller.ts:
--------------------------------------------------------------------------------
1 | import {
2 | Controller,
3 | Post,
4 | Get,
5 | UseGuards,
6 | Query,
7 | Patch,
8 | UsePipes,
9 | ValidationPipe,
10 | Body,
11 | } from '@nestjs/common';
12 | import { AuthGuard } from '@nestjs/passport';
13 | import { UserService } from './user.service';
14 | import { GetUser } from 'src/auth/decorators/get-user.decorator';
15 | import { User } from './interfaces/user.interface';
16 | import { UserDto } from './dto/user.dto';
17 |
18 | @Controller('user')
19 | @UseGuards(AuthGuard())
20 | export class UserController {
21 | constructor(private readonly userService: UserService) {}
22 |
23 | @Get('/')
24 | async getUser(@GetUser() user: User): Promise
9 |
12 | shimmer
10 | shimmer
11 |
13 |
16 | shimmer
14 | shimmer
15 | shimmer
19 | shimmer
20 | shimmer
21 | shimmer
22 | shimmer
23 | shimmer
24 | shimmer
25 | shimmer
28 | shimmer
29 | shimmer
30 | shimmer
31 | shimmer
32 | shimmer
33 | shimmer
34 | shimmer
37 | shimmer
38 | shimmer
39 | shimmer
40 | shimmer
41 | shimmer
42 | shimmer
43 |
43 |
67 |
68 | )
69 | })
70 |
71 | export default Card
72 |
--------------------------------------------------------------------------------
/frontend/src/components/CheckBox/CheckboxList.test.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import user from '@testing-library/user-event'
3 | import { render } from '@testing-library/react'
4 |
5 | import CheckboxList from './CheckboxList'
6 | import { FilterContextProvider } from 'src/context/FilterContext/FilterContext'
7 |
8 | jest.mock('next/router', () => ({
9 | useRouter: jest.fn().mockImplementation(() => ({
10 | push: jest.fn(() => null),
11 | })),
12 | }))
13 |
14 | const Wrapper: React.FC = ({ children }) => {
15 | return
44 |
66 | 46 | {name} 47 |
48 |
49 |
65 | ${price.toLocaleString()}
50 | 51 | {isInCart ? ( 52 | 59 | ) : ( 60 | 63 | )} 64 |
53 |
85 | )
86 | }
87 |
88 | export default Header
89 |
--------------------------------------------------------------------------------
/server/src/product/product.schema.ts:
--------------------------------------------------------------------------------
1 | import * as mongoose from 'mongoose';
2 | import productFieldValues from './product.field-values.js';
3 |
4 | export const productSchema = new mongoose.Schema({
5 | Model: {
6 | type: String,
7 | required: true,
8 | text: true,
9 | },
10 | Part: {
11 | type: String,
12 | },
13 | Seller: { type: mongoose.Schema.Types.ObjectId, ref: 'user' },
14 |
15 | 'Screen Size': {
16 | type: String,
17 | required: true,
18 | },
19 | 'Screen Panel Type': {
20 | type: String,
21 | enum: productFieldValues.screenPanelType,
22 | required: true,
23 | },
24 | Resolution: {
25 | type: String,
26 | enum: productFieldValues.resolution,
27 | required: true,
28 | },
29 | 'Refresh Rate': {
30 | type: String,
31 | enum: productFieldValues.refreshRate,
32 | required: true,
33 | },
34 | Dimensions: {
35 | type: String,
36 | lowercase: true,
37 | trim: true,
38 | required: true,
39 | },
40 | Weight: {
41 | type: Number,
42 | required: true,
43 | },
44 | 'CPU Core Count': {
45 | type: Number,
46 | enum: productFieldValues.cpuCoreCount,
47 | required: true,
48 | },
49 | 'CPU Core Clock': {
50 | type: String,
51 | required: true,
52 | },
53 | 'CPU Boost Clock': {
54 | type: String,
55 | required: true,
56 | },
57 | Memory: {
58 | type: Number,
59 | enum: productFieldValues.memory,
60 | required: true,
61 | },
62 | CPU: {
63 | type: String,
64 | required: true,
65 | },
66 | 'CPU Microarchitecture': {
67 | type: String,
68 | },
69 | 'SSD Storage': {
70 | type: String,
71 | required: true,
72 | },
73 | 'SSD Type': {
74 | type: String,
75 | required: true,
76 | },
77 | Storage: {
78 | type: String,
79 | required: true,
80 | },
81 | GPU: {
82 | type: String,
83 | required: true,
84 | },
85 | 'GPU Memory': {
86 | type: Number,
87 | enum: productFieldValues.memory,
88 | required: true,
89 | },
90 | 'Operating System': {
91 | type: String,
92 | required: true,
93 | },
94 | 'SD Card Reader': {
95 | type: String,
96 | lowercase: true,
97 | trim: true,
98 | enum: ['yes', 'no'],
99 | },
100 | 'Front Facing Webcam': {
101 | type: String,
102 | required: true,
103 | },
104 | Images: {
105 | type: Array,
106 | },
107 | Name: {
108 | type: String,
109 | required: true,
110 | text: true,
111 | },
112 | Price: {
113 | type: Number,
114 | required: true,
115 | },
116 | Manufacturer: {
117 | type: String,
118 | trim: true,
119 | enum: productFieldValues.manufacturer,
120 | required: true,
121 | },
122 | });
123 |
124 | productSchema.index({ Name: 'text', Model: 'text' });
125 |
--------------------------------------------------------------------------------
/frontend/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "frontend",
3 | "version": "0.1.0",
4 | "private": true,
5 | "scripts": {
6 | "build-export": "next build && next export",
7 | "dev": "next dev",
8 | "build": "next build",
9 | "start": "next start",
10 | "storybook": "start-storybook -p 6006",
11 | "build-storybook": "build-storybook",
12 | "test": "jest",
13 | "prettier": "prettier --write '**/*.{ts,js,tsx,jsx,css,html}'",
14 | "cy:run": "cypress run",
15 | "cy:open": "cypress open",
16 | "test:e2e:dev": "start-server-and-test dev http://localhost:3000 cy:open"
17 | },
18 | "husky": {
19 | "hooks": {
20 | "pre-commit": "yarn test"
21 | }
22 | },
23 | "dependencies": {
24 | "classnames": "2.2.6",
25 | "framer-motion": "2.4.3-beta.2",
26 | "next": "9.5.5",
27 | "react": "16.13.1",
28 | "react-dom": "16.13.1",
29 | "react-hook-form": "6.5.1",
30 | "react-query": "2.5.14",
31 | "react-query-devtools": "2.4.2",
32 | "start-server-and-test": "1.11.3"
33 | },
34 | "devDependencies": {
35 | "@babel/core": "7.11.1",
36 | "@babel/helper-builder-react-jsx": "7.12.13",
37 | "@babel/helper-builder-react-jsx-experimental": "7.12.11",
38 | "@babel/helper-define-map": "7.13.12",
39 | "@babel/plugin-transform-react-jsx": "7.13.12",
40 | "@storybook/addon-actions": "6.0.17",
41 | "@storybook/addon-essentials": "6.0.17",
42 | "@storybook/addon-knobs": "6.0.17",
43 | "@storybook/addon-links": "6.0.17",
44 | "@storybook/react": "6.0.17",
45 | "@testing-library/cypress": "6.0.0",
46 | "@testing-library/dom": "7.22.1",
47 | "@testing-library/jest-dom": "5.11.3",
48 | "@testing-library/react": "10.4.8",
49 | "@testing-library/react-hooks": "3.4.1",
50 | "@testing-library/user-event": "12.1.1",
51 | "@types/classnames": "2.2.10",
52 | "@types/jest": "26.0.9",
53 | "@types/node": "14.0.27",
54 | "@types/react": "16.9.46",
55 | "@types/react-dom": "16.9.9",
56 | "@types/react-query": "1.1.2",
57 | "@types/testing-library__react": "10.2.0",
58 | "autoprefixer": "9.8.6",
59 | "babel-jest": "26.3.0",
60 | "babel-loader": "8.0.5",
61 | "css-loader": "4.2.1",
62 | "cypress": "5.0.0",
63 | "fork-ts-checker-webpack-plugin": "5.1.0",
64 | "husky": "4.2.5",
65 | "identity-obj-proxy": "3.0.0",
66 | "jest": "26.4.0",
67 | "jest-watch-typeahead": "0.6.0",
68 | "msw": "0.20.5",
69 | "next-pwa": "5.0.4",
70 | "node-fetch": "2.6.1",
71 | "postcss-custom-properties": "9.1.1",
72 | "postcss-flexbugs-fixes": "4.2.1",
73 | "postcss-import": "12.0.1",
74 | "postcss-loader": "3.0.0",
75 | "postcss-nested": "4.2.3",
76 | "postcss-preset-env": "6.7.0",
77 | "react-is": "16.13.1",
78 | "react-test-renderer": "16.13.1",
79 | "style-loader": "1.2.1",
80 | "ts-loader": "8.0.2",
81 | "typescript": "4.2.4"
82 | }
83 | }
84 |
--------------------------------------------------------------------------------
/frontend/src/components/Form/AuthForm.module.css:
--------------------------------------------------------------------------------
1 | .btn_group {
2 | background: var(--c-bg-primary);
3 | border-radius: 16px;
4 | border: 2px solid var(--c-border);
5 | width: 100%;
6 | display: flex;
7 | justify-content: space-between;
8 | align-items: center;
9 | margin-bottom: 2rem;
10 | & > button {
11 | outline: none;
12 | flex: 1;
13 | font-weight: 600;
14 | border-radius: 16px;
15 | }
16 | }
17 |
18 | .form {
19 | display: flex;
20 | justify-content: center;
21 | align-items: center;
22 | flex-direction: column;
23 | width: 100%;
24 | margin: 2rem 0;
25 | margin-bottom: 0;
26 | }
27 |
28 | .input_container {
29 | width: 100%;
30 | display: flex;
31 | justify-content: flex-start;
32 | align-items: center;
33 | flex-direction: column;
34 |
35 | position: relative;
36 | z-index: 1;
37 | margin-bottom: 2rem;
38 |
39 | & > label {
40 | background: var(--c-bg-secondary);
41 | border-radius: 8px;
42 | padding: 0 0.725rem;
43 | display: block;
44 | position: absolute;
45 | top: -0.3rem;
46 | left: 0;
47 | z-index: 99;
48 | font-size: 0.75rem;
49 | letter-spacing: 0.5px;
50 | }
51 | & > input {
52 | border: solid 2px var(--c-border);
53 | border-radius: 8px;
54 | padding: 0.725rem;
55 | width: 100%;
56 | background: var(--c-bg-secondary);
57 | }
58 | }
59 | .active {
60 | box-shadow: 0 1px 2px var(--shadow);
61 | background: var(--c-bg-secondary) !important;
62 | }
63 |
64 | .btn_submit {
65 | margin-top: 2rem;
66 | width: 100%;
67 | position: relative;
68 | & > button {
69 | width: 100%;
70 | background: var(--c-primary-light);
71 | color: var(--c-text-on-p);
72 | position: relative;
73 | }
74 | }
75 |
76 | .text_error {
77 | color: red;
78 | width: 100%;
79 | text-align: start;
80 | padding-top: 0.5rem;
81 | }
82 | .spinner {
83 | margin: 0 auto !important;
84 | }
85 | .show_password {
86 | width: 32px;
87 | height: 26px;
88 | cursor: pointer;
89 | background: white;
90 | position: absolute;
91 | top: -12px;
92 | right: -30px;
93 |
94 | & > span {
95 | opacity: 0.6;
96 | display: inline-block;
97 | background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMTUgMTJjMCAxLjY1NC0xLjM0NiAzLTMgM3MtMy0xLjM0Ni0zLTMgMS4zNDYtMyAzLTMgMyAxLjM0NiAzIDN6bTktLjQ0OXMtNC4yNTIgOC40NDktMTEuOTg1IDguNDQ5Yy03LjE4IDAtMTIuMDE1LTguNDQ5LTEyLjAxNS04LjQ0OXM0LjQ0Ni03LjU1MSAxMi4wMTUtNy41NTFjNy42OTQgMCAxMS45ODUgNy41NTEgMTEuOTg1IDcuNTUxem0tNyAuNDQ5YzAtMi43NTctMi4yNDMtNS01LTVzLTUgMi4yNDMtNSA1IDIuMjQzIDUgNSA1IDUtMi4yNDMgNS01eiIvPjwvc3ZnPg==');
98 | background-repeat: no-repeat;
99 | background-position: center;
100 | width: 32px;
101 | height: 32px;
102 | &:hover {
103 | opacity: 1;
104 | }
105 | }
106 | }
107 |
--------------------------------------------------------------------------------
/frontend/pages/product/product-page.module.css:
--------------------------------------------------------------------------------
1 | .container {
2 | grid-area: body;
3 | max-width: 1200px;
4 | height: 1000px;
5 |
6 | display: grid;
7 | grid-template-rows: max-content 1fr;
8 | grid-template-areas: 'summary' 'specs';
9 | }
10 |
11 | .summary_container {
12 | box-shadow: 0 1px 2px var(--shadow);
13 | border-radius: 8px;
14 |
15 | grid-area: summary;
16 | display: grid;
17 | grid-template-columns: 1fr 1fr;
18 | grid-template-areas: 'image info';
19 |
20 | .image_container {
21 | grid-area: image;
22 | display: flex;
23 | justify-content: center;
24 | align-items: center;
25 | & > img {
26 | width: 100%;
27 | }
28 | }
29 |
30 | .info_container {
31 | grid-area: info;
32 | background: var(--c-bg-primary);
33 | padding: 2rem 1rem;
34 | padding-right: 0;
35 | border-radius: 0;
36 | border-left: 2px solid var(--c-border);
37 | .name {
38 | font-weight: 600;
39 | font-size: 1.25rem;
40 | }
41 | .link {
42 | margin-bottom: 0.25rem;
43 | color: #537ecf;
44 | font-weight: 600;
45 | }
46 | .seller {
47 | border: 2px solid var(--c-border);
48 | padding: 0.5rem;
49 | margin: 2rem 0;
50 | margin-right: 1rem;
51 |
52 | background: var(--c-bg-secondary);
53 |
54 | & > span {
55 | font-weight: 600;
56 | color: var(--c-text-secondary);
57 | }
58 | }
59 | .price_button {
60 | display: flex;
61 | justify-content: flex-start;
62 | align-items: center;
63 | .price {
64 | font-size: 2rem;
65 | font-weight: 600;
66 | margin-left: 0.25rem;
67 | }
68 | .button {
69 | margin-left: 1rem;
70 | cursor: pointer;
71 | font-weight: 700;
72 | font-size: 13px;
73 | padding: 0.5rem;
74 | border-radius: 4px;
75 |
76 | color: var(--c-text-on-p);
77 | background: var(--c-primary);
78 |
79 | transition: border var(--a-60-cubic);
80 | border: 2px solid var(--c-bg-secondary);
81 | &:hover {
82 | color: var(--c-text-on-p);
83 | background: var(--c-primary-light);
84 | }
85 | }
86 | }
87 | }
88 | }
89 | .specs_container {
90 | grid-area: specs;
91 | border-top: 2px solid var(--c-border);
92 | background: var(--c-bg-secondary);
93 | padding: 1rem;
94 | table {
95 | border-collapse: collapse;
96 | }
97 | tr {
98 | border-bottom: 1px solid var(--c-border);
99 | border-radius: 8px;
100 | &:hover {
101 | background: var(--c-bg-primary-dark);
102 | }
103 | }
104 | td {
105 | vertical-align: baseline;
106 | text-align: start;
107 | padding: 1rem 0;
108 | }
109 | .category {
110 | display: inline-block;
111 | width: max-content;
112 | }
113 | .value {
114 | padding-left: 2rem;
115 | }
116 | }
117 |
118 |
119 | .color_pink {
120 | color: #f56a79 !important;
121 | &:hover {
122 | color: var(--c-text-on-p);
123 | background: #f56a79;
124 | }
125 | }
--------------------------------------------------------------------------------
/frontend/pages/auth/index.module.css:
--------------------------------------------------------------------------------
1 | .container {
2 | grid-area: body;
3 | display: flex;
4 | flex-direction: column;
5 | justify-content: center;
6 | align-items: center;
7 |
8 | margin: 0 auto;
9 | margin-top: 1rem;
10 |
11 | background: var(--c-bg-secondary);
12 | border-radius: 16px;
13 | box-shadow: 0 1px 2px var(--shadow);
14 | padding: 1.5rem 2rem;
15 | }
16 |
17 | .btn_group {
18 | background: var(--c-bg-primary);
19 | border-radius: 16px;
20 | border: 2px solid var(--c-border);
21 | width: 100%;
22 | display: flex;
23 | justify-content: space-between;
24 | align-items: center;
25 | margin-bottom: 2rem;
26 | & > button {
27 | outline: none;
28 | flex: 1;
29 | font-weight: 600;
30 | border-radius: 16px;
31 | }
32 | }
33 |
34 | .form {
35 | display: flex;
36 | justify-content: center;
37 | align-items: center;
38 | flex-direction: column;
39 | width: 100%;
40 | margin: 2rem 0;
41 | margin-bottom: 0;
42 | }
43 |
44 | .input_container {
45 | width: 100%;
46 | display: flex;
47 | justify-content: flex-start;
48 | align-items: center;
49 | flex-direction: column;
50 |
51 | position: relative;
52 | z-index: 1;
53 | margin-bottom: 2rem;
54 |
55 | & > label {
56 | background: var(--c-bg-secondary);
57 | border-radius: 8px;
58 | padding: 0 0.725rem;
59 | display: block;
60 | position: absolute;
61 | top: -0.3rem;
62 | left: 0;
63 | z-index: 99;
64 | font-size: 0.75rem;
65 | letter-spacing: 0.5px;
66 | }
67 | & > input {
68 | border: solid 2px var(--c-border);
69 | border-radius: 8px;
70 | padding: 0.725rem;
71 | width: 100%;
72 | background: var(--c-bg-secondary);
73 | }
74 | }
75 | .active {
76 | box-shadow: 0 1px 2px var(--shadow);
77 | background: var(--c-bg-secondary) !important;
78 | }
79 |
80 | .btn_submit {
81 | margin-top: 2rem;
82 | width: 100%;
83 | & > button {
84 | width: 100%;
85 | background: var(--c-primary-light);
86 | color: var(--c-text-on-p);
87 | }
88 | }
89 |
90 | .text_error {
91 | color: red;
92 | width: 100%;
93 | text-align: start;
94 | padding-top: 0.5rem;
95 | }
96 |
97 | .show_password {
98 | width: 32px;
99 | height: 26px;
100 | cursor: pointer;
101 | background: white;
102 | position: absolute;
103 | top: -12px;
104 | right: -30px;
105 |
106 | & > span {
107 | opacity: 0.6;
108 | display: inline-block;
109 | background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMTUgMTJjMCAxLjY1NC0xLjM0NiAzLTMgM3MtMy0xLjM0Ni0zLTMgMS4zNDYtMyAzLTMgMyAxLjM0NiAzIDN6bTktLjQ0OXMtNC4yNTIgOC40NDktMTEuOTg1IDguNDQ5Yy03LjE4IDAtMTIuMDE1LTguNDQ5LTEyLjAxNS04LjQ0OXM0LjQ0Ni03LjU1MSAxMi4wMTUtNy41NTFjNy42OTQgMCAxMS45ODUgNy41NTEgMTEuOTg1IDcuNTUxem0tNyAuNDQ5YzAtMi43NTctMi4yNDMtNS01LTVzLTUgMi4yNDMtNSA1IDIuMjQzIDUgNSA1IDUtMi4yNDMgNS01eiIvPjwvc3ZnPg==');
110 | background-repeat: no-repeat;
111 | background-position: center;
112 | width: 32px;
113 | height: 32px;
114 | &:hover {
115 | opacity: 1;
116 | }
117 | }
118 | }
119 |
--------------------------------------------------------------------------------
/server/src/product/product.controller.ts:
--------------------------------------------------------------------------------
1 | /* eslint-disable @typescript-eslint/explicit-module-boundary-types */
2 | import {
3 | Controller,
4 | Get,
5 | Post,
6 | Query,
7 | Body,
8 | UsePipes,
9 | ValidationPipe,
10 | Param,
11 | Delete,
12 | Patch,
13 | UseGuards,
14 | } from '@nestjs/common';
15 | import { ProductService } from './product.service';
16 | import { Product } from './interfaces/product.interface';
17 | import { CreateProductDto } from './dto/create-product.dto';
18 | import { ProductFiltersPipe } from './pipes/product.filters-pipe';
19 | import { AuthGuard } from '@nestjs/passport';
20 | import { GetUser } from 'src/auth/decorators/get-user.decorator';
21 | import { User } from 'src/user/interfaces/user.interface';
22 | import { ApiResponse } from '@nestjs/swagger';
23 |
24 | @Controller('product')
25 | export class ProductController {
26 | constructor(private readonly productService: ProductService) {}
27 |
28 | @Get('/')
29 | async getProducts(
30 | @Query(ProductFiltersPipe)
31 | filter: Record
58 | {userState ? (
59 |
84 |
60 | }>
61 |
65 | ) : (
66 |
67 |
68 |
71 |
72 |
73 | )}
74 |
75 |
76 |
62 | Do you wanna Log Out ?
63 |
64 |
2 | 
3 |
A progressive Node.js framework for building efficient and scalable server-side applications, heavily inspired by Angular.
11 |
12 | 
13 | 
14 | 
15 | 
16 | 
17 | 
18 | 
19 | 
20 | 
21 | 
22 | 
23 |
'An error has occurred: ' + error.message
30 | if (data && !data.products?.length) return
53 | {isLoading || isFetching ? (
54 | Array.from({ length: 10 }).map((e, i) => {
55 | return
59 | {data.products.map((e: any, i: number) => {
60 | return (
61 |
62 | 5 ? 'lazy' : 'eager'}
68 | addOneToCart={addOneToCart}
69 | removeOneFromCart={removeOneFromCart}
70 | isInCart={checkIsInCart(e._id)}
71 | >
72 |
73 | )
74 | })}
75 |
76 | )}
77 |
78 |
79 | {Array.from({ length: data?.numberOfPages }).map((e, i) => {
80 | const pageNumber = i + 1
81 |
82 | let buttonStyle = styles.button_not_selected
83 | if ((!pagination && pageNumber === 1) || pageNumber === pagination) buttonStyle = styles.button_selected
84 |
85 | return (
86 |
94 | )
95 | })}
96 |
97 |
98 | )
99 | }
100 |
101 | export default CardList
102 |
--------------------------------------------------------------------------------
/frontend/pages/cart/index.module.css:
--------------------------------------------------------------------------------
1 | .container {
2 | display: grid;
3 | grid-template-columns: 1fr 225px;
4 | grid-template-rows: 1fr;
5 | gap: 0 2rem;
6 | grid-template-areas: 'list summary';
7 | padding: 1rem 1rem;
8 | }
9 |
10 | .cart_list_section {
11 | grid-area: list;
12 | }
13 |
14 | .summary {
15 | grid-area: summary;
16 | display: flex;
17 | flex-direction: column;
18 | justify-content: flex-start;
19 | align-items: flex-end;
20 | padding: 1.5rem 1rem;
21 | background: var(--c-bg-secondary);
22 | border-radius: 8px;
23 | box-shadow: 0 1px 2px var(--shadow);
24 | height: max-content;
25 | }
26 |
27 | .summary_title {
28 | font-size: 1.25rem;
29 | font-weight: 700;
30 | color: var(--c-primary);
31 | margin-bottom: 0.25rem;
32 | }
33 | .summary_cart_length {
34 | margin-bottom: 2rem;
35 | }
36 | .summary_cart_total_label {
37 | margin-bottom: 0.25rem;
38 | }
39 | .summary_cart_total {
40 | font-weight: 700;
41 | font-size: 1.75rem;
42 | }
43 | .summary_submit_button {
44 | cursor: pointer;
45 | white-space: nowrap;
46 | text-transform: uppercase;
47 | font-weight: 700;
48 | color: var(--c-text-on-p);
49 | background: var(--c-primary-light);
50 | padding: 0.75rem 0.75rem;
51 | margin-top: 2rem;
52 | border-radius: 4px;
53 | }
54 |
55 | .product_list {
56 | display: flex;
57 | flex-direction: column;
58 | list-style-type: none;
59 | }
60 |
61 | .product_list_item {
62 | position: relative;
63 | background: var(--c-bg-secondary);
64 | border-radius: 8px;
65 | box-shadow: 0 1px 2px var(--shadow);
66 | margin-bottom: 2rem;
67 | & > a {
68 | min-height: 100px;
69 | display: flex;
70 | flex-direction: row;
71 | justify-content: flex-start;
72 | align-items: flex-start;
73 | padding-left: 1rem;
74 | }
75 | .image {
76 | margin: auto 0;
77 | min-width: 100px;
78 | max-width: 100px;
79 | & > img {
80 | min-width: 100%;
81 | max-width: 100%;
82 | }
83 | }
84 | .name {
85 | margin: 0 2rem;
86 | line-height: 1.25;
87 | font-weight: 700;
88 | margin: auto 2rem;
89 | }
90 | .price {
91 | padding: 0.25rem;
92 | padding-left: 1rem;
93 | background: var(--c-primary);
94 | color: var(--c-text-on-p);
95 |
96 | margin-top: 1rem;
97 | text-align: right;
98 | font-weight: 700;
99 | font-size: 1.25rem;
100 |
101 | border-top-left-radius: 1.25rem;
102 | border-bottom-left-radius: 1.25rem;
103 | }
104 | .trash_icon {
105 | cursor: pointer;
106 | position: absolute;
107 | bottom: 6px;
108 | right: 6px;
109 |
110 | & > svg {
111 | fill: #c53030;
112 | }
113 | transition: transform 300ms cubic-bezier(0.25, 0.8, 0.25, 1);
114 | &:hover,
115 | &:focus {
116 | transform: rotate(-25deg);
117 | }
118 | }
119 |
120 | transition: box-shadow 300ms cubic-bezier(0.25, 0.8, 0.25, 1);
121 | &:hover,
122 | &:focus {
123 | box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
124 | }
125 | }
126 |
127 | .modal_content {
128 | display: flex;
129 | justify-content: space-evenly;
130 | align-items: center;
131 | width: 100%;
132 | }
133 | .modal_icon {
134 | color: var(--green500);
135 | }
136 | .modal_message {
137 | font-size: 2rem;
138 | }
139 |
140 | @media (max-width: 900px) {
141 | .summary {
142 | position: fixed;
143 | bottom: 0;
144 | left: 0;
145 | z-index: 5;
146 | justify-content: center;
147 | align-items: center;
148 | width: 100%;
149 | padding: 1rem 0;
150 | border-top-left-radius: 36px;
151 | border-top-right-radius: 36px;
152 | background: #ffffff;
153 | box-shadow: -2px -9px 14px -5px rgba(0, 0, 0, 0.61);
154 | }
155 | .container {
156 | display: flex;
157 | }
158 | }
159 |
--------------------------------------------------------------------------------
/frontend/src/components/Form/AuthForm.tsx:
--------------------------------------------------------------------------------
1 | import React, { useState, useEffect } from 'react'
2 | import { useForm } from 'react-hook-form'
3 |
4 | import styles from './AuthForm.module.css'
5 | import { API_Login, API_Signup, API_GetUser, API_MergeLocalStorageCartWithDatabase } from 'src/utils/api'
6 | import { AuthDto } from 'src/utils/auth-form.dto'
7 | import Button from '../Button/Button'
8 | import { useRouter } from 'next/router'
9 | import Spinner from '../Spinner/Spinner'
10 | import { useUserContext } from 'src/context/UserContext/UserContext'
11 |
12 | interface FormData {
13 | email: string
14 | password: string
15 | name: string
16 | }
17 | interface Props {
18 | activePage: 'Log in' | 'Sign up'
19 | }
20 |
21 | const AuthForm = ({ activePage }: Props) => {
22 | const router = useRouter()
23 | const { setAccessToken, dispatchUserState } = useUserContext()
24 | const [showPassword, setShowPassword] = useState(false)
25 | const [serverError, setServerError] = useState
71 | router.push('/')}>
104 |
114 |
115 | )
116 | }
117 |
118 | export default index
119 |
--------------------------------------------------------------------------------
/frontend/src/context/UserContext/UserContext.tsx:
--------------------------------------------------------------------------------
1 | import React, { createContext, useContext, useReducer, useState, useEffect } from 'react'
2 | import { API_AddOneToCart, API_RemoveAllFromCart, API_RemoveOneFromCart } from 'src/utils/api'
3 | import { IUserContext, Action, User, ActionCart } from './interfaces'
4 |
5 | export const UserContext = createContext
72 |
80 | Order Summary
73 | {getTotalPaymentAndProductCount.count} Items
74 | Total Payment
75 | {getTotalPaymentAndProductCount.total.toLocaleString()} $
76 |
79 |
81 |
102 |
103 | -
82 | {products?.map(e => {
83 | return (
84 |
-
85 |
86 |
87 | 88 |90 |
89 |
{e.Name}91 |{e.Price.toLocaleString()} $92 | 93 | 94 |deleteHandler(e._id)}> 95 |97 |96 |
98 | )
99 | })}
100 |
105 |
113 |
106 |
108 |
109 |
112 | Order is successful
110 |Thank you for choosing us
111 |
40 | {isFallback ? (
41 |
45 |
51 |
63 |
64 |
65 |
66 | {product.Manufacturer}
67 |
68 |
69 |
70 | {product.Name}
71 |
72 |
73 | Seller:
74 |
75 | {product.SellerName}
76 |
77 |
78 |
79 |
98 |
99 |
100 |
101 |
102 |
103 | {Object.keys(product).map((e: string) => {
104 | if (specFilter.includes(e)) return null
105 | else {
106 | return (
107 |
116 |
117 |
118 | )}
119 |
120 | )
121 | }
122 |
123 | export const getStaticProps: GetStaticProps = async ({ params }) => {
124 | const res = await fetch(`${BASE_URL}/product/${params?.id}`)
125 | const product = await res.json()
126 |
127 | return { props: { product } }
128 | }
129 |
130 | export const getStaticPaths: GetStaticPaths = async () => {
131 | const res = await fetch(`${BASE_URL}/product/get-all-ids`)
132 | const ids = await res.json()
133 |
134 | const paths = ids.map((id: string) => ({
135 | params: { id: id } || '',
136 | }))
137 |
138 | return { paths, fallback: false }
139 | }
140 |
141 | export default Product
142 |
--------------------------------------------------------------------------------
/frontend/src/components/Icons/NotFoundIcon.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | import styles from './icon.module.css'
4 |
5 | interface Props {
6 | text: string
7 | }
8 | const NotFoundIcon = ({ text }: Props) => {
9 | return (
10 | Loading...
42 | ) : ( 43 | <> 44 |{product.Price}$
80 | 81 | {checkIsInCart() ? ( 82 | 85 | ) : ( 86 | 96 | )} 97 || {e} | 109 |{product[e]} | 110 |
11 |
31 | )
32 | }
33 |
34 | export default NotFoundIcon
35 |
--------------------------------------------------------------------------------
/server/src/user/user.service.ts:
--------------------------------------------------------------------------------
1 | import {
2 | Injectable,
3 | ConflictException,
4 | InternalServerErrorException,
5 | NotFoundException,
6 | } from '@nestjs/common';
7 | import { InjectModel } from '@nestjs/mongoose';
8 | import { Model } from 'mongoose';
9 | import { User } from '../user/interfaces/user.interface';
10 | import { AuthCredentialsDto } from 'src/auth/dto/auth-credentials-dto';
11 | import * as bcrypt from 'bcrypt';
12 | import { UserDto } from './dto/user.dto';
13 | import { Product } from 'src/product/interfaces/product.interface';
14 | import { JwtPayload } from 'src/auth/interfaces/jwt-payload.interface';
15 | import { JwtService } from '@nestjs/jwt';
16 |
17 | @Injectable()
18 | export class UserService {
19 | constructor(
20 | private readonly jwtService: JwtService,
21 | @InjectModel('user') private readonly userModel: Model{text}
12 | 30 |
121 |
165 | )
166 | }
167 |
168 | export default Slider
169 |
--------------------------------------------------------------------------------
/frontend/src/components/Sidebar/Sidebar.stories.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | import Sidebar from './Sidebar'
4 |
5 | export default {
6 | component: Sidebar,
7 | title: 'Sidebar',
8 | }
9 |
10 | export const Default = () => {
11 | return {title}
122 |
123 |
124 | {`${minValue}${SliderLabelSymbols[title]}`}
125 |
126 |
127 | {`${maxValue}${SliderLabelSymbols[title]}`}
128 |
129 |
130 |
131 |
132 |
148 |
163 |
164 |