README.md

BrainsterProject_IlijaMalinkovskiFE11

Name

PROJECT 3 - README

Add your files

• Create or upload files
• Add files using the command line or push an existing Git repository with the following command:

cd existing_repo
git remote add origin https://git.brainster.co/Ilija.Malinkovski-FE11/brainsterchallenges_ilijamalinkovskife11.git
git branch -M main
git push -uf origin main

After installing the dependencies, run:
npm run server
npm run dev
npm run watch:scss
Resources
- http://localhost:4000";
- http://localhost:4000/products";
- http://localhost:4000/local_brands";
- http://localhost:4000/accessories";
- http://localhost:4000/vintage";
- http://localhost:4000/contact_page";
- http://localhost:4000/about_page";
- http://localhost:4000/faq";
- http://localhost:4000/giftcard_page"
- http://localhost:4000/ads";
- http://localhost:4000/filters";

Integrate with your tools

• Set up project integrations

Test and Deploy

Use the built-in continuous integration in GitLab.

• Get started with GitLab CI/CD
• Analyze your code for known vulnerabilities with Static Application Security Testing(SAST)
• Deploy to Kubernetes, Amazon EC2, or Amazon ECS using Auto Deploy
• Use pull-based deployments for improved Kubernetes management
• Set up protected environments

---

Description

Igralishe E-commerce App project

Igralishe is Next.js and TypeScript-powered e-commerce app for a clothing store in Skopje. Featuring dynamic routes, custom hooks, contexts, and a blend of static, server, and client-side rendering. Data is stored in db.json and local storage, accessed through a mockup backend server JSON server. The app integrates various NPM packages for functionality.

Key features

1. Built with Next.js 14 with TypeScript

2. Dynamic Page Routes

3. Data Storage: The app utilizes db.json and local storage for backend local data management,requiring enabled settings for localStorage, sessionStorage and Cookies. This ensures the ability to remember user login sessions and efficiently manage the cart and favorites."

4. Local JSON Server: A lightweight back-end for mocking up store data and handling data requests.

5. Rendering Techniques: Integrates static site generation, server-side rendering, and client-side rendering.

6. Filtering: Implements URL query-based filtering with server-side rendering for a personalized shopping experience.

7. Styling: Sass for styling the mobile and desktop layout. Responsive for both Mobile and Desktop

8. NPM Packages Integration: Leverages various NPM packages to enhance functionality and streamline development.

   NPM Packages used:

   • json server: back-end mockup
   • formik + Yup: validation and forms
   • js-cookies: mannaging extended log in sessiosn
   • react-paginate: page like pagination
   • react-slick: carousels and product image previews
   • uuid: generating unique IDs for new members

Project status

Finished 17.12.2023.