## Overview
- Official website: [https://e-shopbee.vercel.app](https://e-shopbee.vercel.app)
- Author: Nguyễn Hoàng Lâm ([@lamhoang1256](https://github.com/lamhoang1256))

## Resources
```
API NodeJS: https://github.com/lamhoang1256/shopbee-api
Heroicons: https://heroicons.com
Google Font: https://fonts.google.com/specimen/Inter
```
## Main technology used

- React, Typescript
- Tailwindcss
- Zustand (State management)
- Axios (Support fetching data)
- Swiper (Slider), react-modal
- Formik , yup (Validation)
- React-toastify, sweetalert2 (Message UI)
- Socket.io-client (Support real time notify message)
- React-helmet-async (Optimize SEO)
- Other: react-router-dom, uuid, react-lazy-load-image-component, query-string, jwt-decode, react-credit-cards, react-quill, ...

## Features

- Update

## Environment Variables

```
# See: https://github.com/lamhoang1256/shopbee-api
REACT_APP_API_URL =

# See: https://cloudinary.com/documentation
REACT_APP_CLOUDINARY_API = 

# See: https://cloudinary.com/documentation/upload_presets
REACT_APP_CLOUDINARY_UPLOAD_PRESET = 

REACT_APP_API_ADMINISTRATION_URL = https://vietnamese-administration.up.railway.app
```

## Screenshots

<details>
 <summary>Home Page</summary>
 <div>
 
 ![homepage](https://user-images.githubusercontent.com/61537853/191778840-f6a056ad-f1f4-4f5c-b8fd-a415d5191ad7.png)
 </div>
</details>
<details>
 <summary>Product Details Page</summary>
 <div>

![product-detail](https://user-images.githubusercontent.com/61537853/191779641-26c3ca3d-6708-49d6-ba33-5a7bc560afc0.png)
 </div>
</details>
<details>
 <summary>Cart Page</summary>
 <div>

![cart-page](https://user-images.githubusercontent.com/61537853/191882927-898eec87-64da-4dcb-a426-a094e9a7d4f7.png)
 </div>
</details>
<details>
 <summary>Checkout Page</summary>
 <div>

![checkout-page](https://user-images.githubusercontent.com/61537853/191882914-313555f2-03c7-4718-a874-4b0213480115.png)
 </div>
</details>
<details>
 <summary>Seach Page</summary>
 <div>

 ![searchpage](https://user-images.githubusercontent.com/61537853/191779399-862c0d7b-930a-40ab-9673-905abcf80070.png)
 </div>
</details>
<details>
 <summary>Sign Up Page</summary>
 <div>
 
![sign-up](https://user-images.githubusercontent.com/61537853/191889741-68966572-404f-47c2-92bf-7ca26e58a90c.png)
 </div>
</details>
<details>
 <summary>Sign In Page</summary>
 <div>
 
![sign-in](https://user-images.githubusercontent.com/61537853/191889758-a7e43bbc-7cdd-4b78-b0e3-e1e41dbc51e2.png)
 </div>
</details>
<details>
 <summary>Profile Page</summary>
 <div>

 ![user-profile](https://user-images.githubusercontent.com/61537853/191779988-af7ea2bc-3ce9-4ac7-965c-42e38f4da716.png)
 </div>
</details>
<details>
 <summary>Change Password Page</summary>
 <div>

 ![user-password-page](https://user-images.githubusercontent.com/61537853/191780195-2e9c63fe-1261-40c5-adb9-1f9d781ad8e3.png)
 </div>
</details>
<details>
 <summary>Voucher collected</summary>
 <div>

 ![user-voucher-collect](https://user-images.githubusercontent.com/61537853/191880801-b1bdb4d9-3625-4a65-8473-0d1a0982eb38.png)
 </div>
</details>
<details>
 <summary>View History</summary>
 <div>

 ![user-product-history](https://user-images.githubusercontent.com/61537853/191880841-1d6b14f8-e65c-4900-a4bd-eca61e67e987.png)
 </div>
</details>
<details>
 <summary>Product Favorite Page</summary>
 <div>

 ![user-product-favorite](https://user-images.githubusercontent.com/61537853/191880884-86fa7b5a-9e64-41d2-93ef-9497fa4a9f64.png)
 </div>
</details>
<details>
 <summary>Notification Page</summary>
 <div>

 ![user-notification](https://user-images.githubusercontent.com/61537853/191880950-9a85728c-1c66-49da-a4e7-21b61883a96c.png)
 </div>
</details>
<details>
 <summary>Card Bank Page</summary>
 <div>

 ![user-card-bank](https://user-images.githubusercontent.com/61537853/191880964-38b89af9-379f-43dd-8038-7e5ef2bc4fac.png)
 </div>
</details>
<details>
 <summary>Order Details Page</summary>
 <div>

 ![user-order-detail](https://user-images.githubusercontent.com/61537853/191881295-af09809f-ec73-40eb-939a-c1a28aff1767.png)
 </div>
</details>
<details>
 <summary>Dashboard Overview Page</summary>
 <div>

 ![dashboard-manage](https://user-images.githubusercontent.com/61537853/191881420-ccfbddd1-ed4b-4f4f-96dd-889b5959aaff.png)
 </div>
</details>
<details>
 <summary>Dashboard Banner Manage Page</summary>
 <div>

![dashboard-banner-manage](https://user-images.githubusercontent.com/61537853/191881483-742e1786-13d5-44d4-a86f-e1cfdff0174a.png)
 </div>
</details>
<details>
 <summary>Dashboard Product Manage Page</summary>
 <div>

![dashboard-product-manage](https://user-images.githubusercontent.com/61537853/191881520-8afbcef1-897f-4955-9360-ab99b2293742.png)
 </div>
</details>
<details>
 <summary>Dashboard Product Add New Page</summary>
 <div>

![dashboard-add-product](https://user-images.githubusercontent.com/61537853/191881604-6c45f552-bede-4885-a071-85410d74bbf0.png)
 </div>
</details>
<details>
 <summary>Dashboard Product Update Page</summary>
 <div>

![dashboard-product-update](https://user-images.githubusercontent.com/61537853/191881824-5f6f17ce-2e57-4246-8ffa-cabcc6dfded4.png)
 </div>
</details>
<details>
 <summary>Dashboard Category Manage Page</summary>
 <div>

![dashboard-category-manage](https://user-images.githubusercontent.com/61537853/191881871-41ec6887-13ea-45e8-9b64-4a6d38fbf339.png)
 </div>
</details>
<details>
 <summary>Dashboard Category Add New Page</summary>
 <div>

![dashboard-add-category](https://user-images.githubusercontent.com/61537853/191881874-57a292d2-27ca-494f-a081-bc365676a349.png)
 </div>
</details>
<details>
 <summary>Dashboard Order Manage Page</summary>
 <div>

![dashboard-order-manage](https://user-images.githubusercontent.com/61537853/191881956-37c1e472-9916-4745-9c30-5245cad26ef1.png)
 </div>
</details>
<details>
 <summary>Dashboard User Manage Page</summary>
 <div>

![dashboard-user-manage](https://user-images.githubusercontent.com/61537853/191882034-54d5f2dc-352c-4f89-b9d2-e42f1a797706.png)
 </div>
</details>
<details>
 <summary>Dashboard User Add New Page</summary>
 <div>

![dashboard-add-user](https://user-images.githubusercontent.com/61537853/191882046-c6ef8c8b-e1ec-48d2-a336-68a7b38fe7da.png)
 </div>
</details>
<details>
 <summary>Dashboard User Update Page</summary>
 <div>

![dashboard-user-update](https://user-images.githubusercontent.com/61537853/191882048-8940ac41-78e3-4dac-a069-692f35188664.png)
 </div>
</details>
<details>
 <summary>Dashboard Voucher Manage Page</summary>
 <div>

![dashboard-voucher-manage](https://user-images.githubusercontent.com/61537853/191882494-8964ab32-f68d-4e6e-baca-1a25fab4f957.png)
 </div>
</details>
<details>
 <summary>Dashboard Voucher Add New Page</summary>
 <div>

![dashboard-voucher-add](https://user-images.githubusercontent.com/61537853/191882498-caedc9e0-efa5-466c-9a5d-303384511997.png)
 </div>
</details>
<details>
 <summary>Dashboard Voucher Update Page</summary>
 <div>

![dashboard-voucher-update](https://user-images.githubusercontent.com/61537853/191882502-b5be177d-048a-450c-9423-6ecd95a4d7fa.png)
 </div>
</details>
<details>
 <summary>Page Not Found</summary>
 <div>

![page-not-found](https://user-images.githubusercontent.com/61537853/191882449-6170cbe9-983f-4206-9d1f-39427f071323.png)
 </div>
</details>


A Website Ecommmerce Using ReactJS, Tailwindcss

Shopbee

## Overview

- Official website: https://net-film.vercel.app
- Author: Nguyễn Hoàng Lâm ( [@lamhoang1256](https://github.com/lamhoang1256) )

## Preview

![preview-home](https://user-images.githubusercontent.com/61537853/204072011-651a0c31-77d8-4315-ba98-4aeaba86c405.png)

## Resources

- API: https://documenter.getpostman.com/view/18986031/UVXdNeFD?fbclid=IwAR3XYwO8C563AuepUFWNFDs9iJzc3jfTWybQRWUekZX4PNWeiGBum_CiRKk
- My API Docs: https://net-film.vercel.app/api-doc
- Font Family: Montserrat

## Main technology used

- NextJS, Typescript
- Sass module
- Firebase
- Redux, Redux toolkit (State management)
- Axios, Swr (Support fetching data)
- Swiper (Slider), react-modal (Modal)
- React-toastify, react-hot-toast (Message UI)
- Next-swagger-doc, swagger-ui-react (Document API)
- Cheerio (Crawl data from website Loklok)
- react-hls-player (Media player video m3u8)
- Other: query-string, uuidv4, ...

## Features

- Full HD movies with subtitles in many languages
- Suggested movies you may like
- Skeleton loading, infinite scrolling movie at Home page and Explore page
- Search movie by name, with suggestion keywords, filter movie by type (category, area, year,...)
- Profile page: allowing to change profile photo avatar, fullname, password.
- Comment: allowing to give reactions, see who reacts to a comment, edit and delete comment.
- Discovery movie trailer (Short videos like TikTok)
- Save history you watch, follow movie you like
- View information of the actors in the movie
- Read latest breaking movie news
- Optimize SEO and Responsive on many devices

## Environment Variables

```
NEXT_PUBLIC_NODE_ENV = development (or production if deploy to vercel)
NEXT_PUBLIC_BASE_URL_API = https://ga-mobile-api.loklok.tv/cms/app
NEXT_PUBLIC_BASE_URL_API_SUB = https://mobile-api.netpop.app/cms/web/pc
NEXT_PUBLIC_SERVER = https://net-film.vercel.app (Link vercel)
NEXT_PUBLIC_LOCALHOST = http://localhost:3000

# See: https://firebase.google.com
NEXT_PUBLIC_FIREBASE_PUBLIC_API_KEY=
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=
NEXT_PUBLIC_FIREBASE_PROJECT_ID=
NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=
NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=
NEXT_PUBLIC_FIREBASE_APP_ID=
```

## Deployment

- Create a new project on the vercel dashboard -> Add Environment Variables from .env.example
- Go to Settings -> Functions -> Function Region -> Change the region to "Sydney, Australia"
- Redeploy the project
- #### If an error occurs npm ERR! code ERESOLVE, npm ERR! ERESOLVE unable to resolve dependency tree -> Change Install Command
- See more: https://vercel.com/changelog/customizing-the-install-command-while-creating-projects
![Fix](https://user-images.githubusercontent.com/61537853/204084412-62207266-7082-48ed-bf42-1256b2073a28.png)

## Screenshots

<details>
 <summary>Home page</summary>
 <div>

![home](https://user-images.githubusercontent.com/61537853/204232492-0ac367a2-26bd-4f56-8805-c9e0e126edb8.png)

 </div>
</details>

<details>
 <summary>Watch Page</summary>
 <div> 
![watch](https://user-images.githubusercontent.com/61537853/204232614-e0a41e92-5c6d-47c7-b938-bad7c27b85a2.png)

</div>

</details>

<details>
 <summary>Search Page</summary>
 <div>
 
![search](https://user-images.githubusercontent.com/61537853/204234288-3b141675-968d-4b02-9e5c-b4ebdbddc9fd.png)
</div>

</details>

<details>
 <summary>Profile Page</summary>
 <div>
![profile](https://user-images.githubusercontent.com/61537853/204232724-e76baba7-34eb-47bf-bc83-ffa0325c00ff.png)
 </div> 

</details>

<details>
 <summary>Change Password Page</summary>
 <div>

![password](https://user-images.githubusercontent.com/61537853/204232781-76303444-2769-414e-b8cc-22277e68aa48.png)
</div>

</details>

<details>
 <summary>News Page</summary>
 <div>
![news](https://user-images.githubusercontent.com/61537853/204232812-5f6fe634-2835-4226-ba02-bd934f03f30a.png)
 </div>
  
</details>

<details>
 <summary>News Details Page</summary>
 <div>

![news-details](https://user-images.githubusercontent.com/61537853/204232877-cb698a79-1ed9-410a-9381-a74e922473f6.png)
</div>

</details>

<details>
 <summary>Explore Page</summary>
 <div>

![explore](https://user-images.githubusercontent.com/61537853/204232929-7e0b4547-dc03-480a-9224-dd4c5acc13a0.png)
</div>

</details>

<details>
 <summary>Discovery Page</summary>
 <div>

![discovery](https://user-images.githubusercontent.com/61537853/204233019-5b1114a3-174d-43fb-a263-ae571e118e42.png)
</div>

</details>

<details>
 <summary>History Page</summary>
 <div>

![history](https://user-images.githubusercontent.com/61537853/204233059-0601154e-2591-4f55-b9a5-bc5a892fb251.png)
</div>

</details>

<details>
 <summary>Sign In Page</summary>
 <div>

![sign-in](https://user-images.githubusercontent.com/61537853/204233151-a5b04107-37ff-47fb-a2f7-6307449875eb.png)
</div>

</details>

<details>
 <summary>Sign Up Page</summary>
 <div>

![sign-up](https://user-images.githubusercontent.com/61537853/204233224-0e3f827e-f149-4d76-be1c-1dd6bcb6dae1.png)
</div>

</details>

<details>
 <summary>Star Info Page</summary>
 <div>

![star](https://user-images.githubusercontent.com/61537853/204233253-c88384ee-265f-4111-b365-a65000a25673.png)
</div>

</details>

<details>
 <summary>Page Not Found</summary>
 <div>

![404](https://user-images.githubusercontent.com/61537853/204233336-52b20cca-603d-47da-b419-606599332ce6.png)
</div>

</details>

<details>
 <summary>Mobile</summary>
 <div>

![mobile](https://user-images.githubusercontent.com/61537853/204233446-ddb1164d-c8b0-4c3c-a49e-3b967a6ccf8b.jpg)
</div>

</details>


A Website To Watch HD Movies, Anime And TV Online For Free Using NextJS

Netfilm

## Overview

- Official website: [https://easy-cinema-booking.vercel.app](https://easy-cinema-booking.vercel.app)
- Author: Nguyễn Hoàng Lâm ( [@lamhoang1256](https://github.com/lamhoang1256) )

## Resources

```
Main API: https://github.com/lamhoang1256/easy-cinema-booking-api
TMDB API: https://www.themoviedb.org
Ionicons: https://ionic.io/ionicons
Google Font: https://fonts.google.com/specimen/Overpass
Cache Image Proxy: https://images.weserv.nl
```

## Main technology used

- React, Ant Design, Styled Components
- Redux, Redux Toolkit (State management)
- Axios, SWR (Data fetching)
- Swiper (Slider)
- React Hook Form , Yup (Validation)
- Sweetalert2, React-toastify (Message UI)
- Other: react-router-dom, uuid, react-lazy-load-image-component, moment, query-string
## Features
- Search movies by name.
- Explore and Booking available seats
- View detail movie info including poster, overview, casts, trailers...
- View Featured Article Posts
- Check History booking, Cancel booking, Update profile
- Manage Cinemas: View information all cinema
- Manage Movies: Add new, update, delete movie.
- Manage User: Add new, update, delete user.
- Manage Showtimes: Add new, update, delete showtime, view info showtime including price, total seats are booked, total money ticket sales.

## Default login credentials:

- email: user@example.com
- password: 11111111
## Environment Variables

```
REACT_APP_PUBLIC = http://localhost:3000 (or Link vercel)

# See: https://github.com/lamhoang1256/easy-cinema-booking-api
REACT_APP_API = 

# See: https://www.themoviedb.org/
REACT_APP_TMDB_KEY = "api_key_tmdb"
```


## Screenshots


<details>
 <summary>HomePage</summary>
 <div>
  
  ![home-fullpage](https://user-images.githubusercontent.com/61537853/176193684-d0e71b33-cd7a-4d32-a39c-9cf43248be3e.png)
 
 </div>
</details>

<details>
 <summary>HomePage In Mobile</summary>
 <div>
  
  ![home-mobile-header](https://user-images.githubusercontent.com/61537853/176193854-65b62127-5f3d-4519-9b62-62f3ae377d65.png)
 
 </div>
</details>

<details>
 <summary>Movie Detail Page</summary>
 <div>
  
  ![movie-detail-page](https://user-images.githubusercontent.com/61537853/176194628-93be4ed7-fcf9-4951-ac55-0a186f3e6ab0.png)
  
</div>
</details>


<details>
 <summary>Search Movie Page</summary>
 <div>
  
  ![search-page](https://user-images.githubusercontent.com/61537853/176194835-524fc2ea-eb49-4442-83fa-40e872abf644.png)
  
</div>
</details>


<details>
 <summary>Article Post Page</summary>
 <div>
  
   ![article-page](https://user-images.githubusercontent.com/61537853/176195479-b9b61892-322a-44e0-9ab1-eca2623ae5f0.png)
  
</div>
</details>

<details>
 <summary>Sign In Page</summary>
 <div>
   
  ![sign-in-page](https://user-images.githubusercontent.com/61537853/176195861-cdbca09f-ad1c-40ef-9fa0-5266ed79368d.png)
  
 </div>
</details>

<details>
 
 <summary>Sign Up Page</summary>
 <div>
     
   ![sign-up-page](https://user-images.githubusercontent.com/61537853/176195895-192041a8-fdcc-4660-9e56-eca95b8371c1.png)

</div>
</details>


<details>
 <summary>Manage User</summary>
 <div>
  
 ![manage-user](https://user-images.githubusercontent.com/61537853/176196333-1cc408f7-974d-4a45-a3b5-f59d20339b4f.png)
 ![add-new-user](https://user-images.githubusercontent.com/61537853/176196359-6be1519e-be81-49bc-b6bb-c38b0f4795fb.png)
 ![update-user](https://user-images.githubusercontent.com/61537853/176197878-bf04533c-cd2e-4370-90e4-3709cf035d1c.png)  
 ![delete-user](https://user-images.githubusercontent.com/61537853/176211990-fc462360-59d0-4fbb-ae22-034d5f7fe657.png)

</div>
</details>

<details>
 <summary>Manage Movie</summary>
 <div>
   
 ![manage-movie](https://user-images.githubusercontent.com/61537853/176196511-20f63e50-26dd-42b8-bea4-3b4799bf38e3.png)
 ![add-new-movie](https://user-images.githubusercontent.com/61537853/176210745-e35c2dbd-34db-4e45-970b-b5610b016cb9.png)
 ![update-movie](https://user-images.githubusercontent.com/61537853/176198015-1aa56499-70c4-4b48-8489-19c5bc465f68.png)
 ![delete-movie](https://user-images.githubusercontent.com/61537853/176211173-d6e5b2e2-d74f-4b04-8cd7-c4342d170cf1.png)
 ![view-movie](https://user-images.githubusercontent.com/61537853/176211506-9f587d55-bcc9-4445-84cb-65670ca8e8b1.png)
  
 </div>
</details>


<details>
 <summary>Manage Showtime</summary>
 <div>
  
 ![manage-showtime](https://user-images.githubusercontent.com/61537853/176206377-eb9e9aed-2006-48e9-b7a3-ad289137bd13.png)
 ![add-new-showtime](https://user-images.githubusercontent.com/61537853/176208100-26d63fdc-bd02-4a59-9730-4aaaf5eb5a0c.png)
 ![update-showtime](https://user-images.githubusercontent.com/61537853/176207712-343e757c-2d75-466c-8d92-441acb9f135a.png)
 ![delete-showtime](https://user-images.githubusercontent.com/61537853/176206438-ece7b80f-e586-4ea3-b1be-6bd4c714dada.png)
 ![view-showtime](https://user-images.githubusercontent.com/61537853/176206563-aa141d50-d70e-4ece-9e74-9fa259529fef.png)

</div>
</details>


Movie Tickets Online Booking Website Using ReactJS

Easy Booking Cinema

## Overview
- Live demo: Official website: [https://hoanglam1309a.github.io/Mercedes](https://hoanglam1309a.github.io/Mercedes)
- Author: Nguyễn Hoàng Lâm ([@lamhoang1256](https://github.com/lamhoang1256))

## Resources
```
Animate: https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css
Bootstrap: https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css
Fontawesome: https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css
React slick: https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css
```

## Screenshots
<details>
 <summary>Landingpage</summary>
 <div>
  
![mercedes-landingpage](https://user-images.githubusercontent.com/96652536/191988222-58f23764-c535-4e39-9352-c8491094fa94.png)
 </div>
</details>



Mercedes Benz Landingpage

## Overview
- Official website: [https://lamhoang1256.github.io/gadget-landingpage](https://lamhoang1256.github.io/gadget-landingpage)
- Author: Nguyễn Hoàng Lâm ([@lamhoang1256](https://github.com/lamhoang1256) )

## Resources
```
Image Design: https://cdn.dribbble.com/users/1665329/screenshots/14422151/media/7351c4518e9d36b3e898424e54190d2e.png?fbclid=IwAR16nUdg-bBGWGRufKI8kZMZz_nbcfdO8U0UJ1k7TeatRlR7xCTr5ptl_xE
Google Font: https://fonts.google.com/specimen/Poppins
Icon Font: https://ionic.io/ionicons
```

## Screenshots

<details>
 <summary>LandingPage</summary>
 <div>

![homeGadgetLandingPage](https://user-images.githubusercontent.com/61537853/176469725-5470461b-c793-4f9b-8870-8e11e765db0c.png)
  
</div>
</details>


Gadget Landingpage Using HTML Sass Javascript

Gadget Landingpage

## Overview
- Live demo: Official website: [https://hoanglam1309a.github.io/cyberphone](https://hoanglam1309a.github.io/cyberphone)
- Author: Nguyễn Hoàng Lâm ([@lamhoang1256](https://github.com/lamhoang1256))

## Resources
```
Google Font: https://fonts.google.com/specimen/Nunito+Sans
```

## Screenshots
<details>
 <summary>Landingpage with light mode</summary>
 <div>
  
![light-mode](https://user-images.githubusercontent.com/96652536/191952845-275e979e-0149-4334-ba2a-c2acd0cbb1ed.png)
 </div>
</details>
<details>
 <summary>Landingpage with dark mode</summary>
 <div>
  
![dark-mode](https://user-images.githubusercontent.com/96652536/191952731-ddf9c12e-5694-428c-ba39-2aa240e46711.png)
 </div>
</details>



Small Landingpage training HTML, Sass and Javascript

Cyberphone Landingpage

## Overview

- Official website: [https://youme.vercel.app](https://youme.vercel.app)
- Author: Nguyễn Hoàng Lâm ( [@lamhoang1256](https://github.com/lamhoang1256) )

## Resources

```
API from LokLok App: https://documenter.getpostman.com/view/18986031/UVXdNeFD
Ionicons: https://ionic.io/ionicons
Google Font: https://fonts.google.com/specimen/Montserrat
Cache Image Proxy: https://images.weserv.nl
```

## Main technology used

- Firebase (authentication, comment)
- React, Styled Components
- Redux, Redux Toolkit (State management)
- Axios, SWR (Data fetching)
- React Slick (Slider)
- React Hook Form , Yup (Validation)
- React-toastify (Message UI)
- React-hls-player, react-tuby (Video player)
- Other: i18n, react-intersection-observer, react-router-dom, uuid, react-lazy-load-image-component, javascript-time-ago, query-string

## Features

- Full HD movies with subtitles in many languages
- Suggested movies
- Top searches
- Search by name
- Filter by region, categories, periods
- Discovery feature (Short videos like tiktok)
- Watch history
- Read post about movie news
- Comments (require authentication using google, facebook)
- Switch language (Vietnamese - English)

## Environment Variables

```
REACT_APP_PUBLIC = http://localhost:3000 (or Link vercel)

# See: https://documenter.getpostman.com/view/18986031/UVXdNeFD
REACT_APP_API = https://ga-mobile-api.loklok.tv/cms/app
REACT_APP_API_PC = https://ga-mobile-api.loklok.tv/cms/web/pc
REACT_APP_ARTICLE = https://web-api.netpop.app/cms/web/pc

# See: https://github.com/hoanglam1309a/SRTtoVTT
REACT_APP_SRT_TO_VTT = https://convert-srt-to-vtt.vercel.app

# See: https://firebase.google.com
REACT_APP_FIREBASE_API_KEY =
REACT_APP_FIREBASE_DOMAIN=
REACT_APP_FIREBASE_PROJECT_ID=
REACT_APP_FIREBASE_STRORAGE_BUCKET=
REACT_APP_FIREBASE_MESSAGING_SENDER_ID=
REACT_APP_FIREBASE_APP_ID=
REACT_APP_FIREBASE_MEASUREMENT_ID =
```

## Screenshots

<details>
 <summary>HomePage</summary>
 <div>
 
  ![youme-home](https://user-images.githubusercontent.com/61537853/177248267-46d6697e-9622-49ba-a332-1860585bef3b.png)

 </div>
</details>

<details>
 <summary>Movie Detail Page</summary>
 <div>
 
  ![youme-detail](https://user-images.githubusercontent.com/61537853/177248282-ce906dac-0599-4305-9917-062d219acea6.png)
  
</div>
</details>


<details>
 <summary>Search Movie Page</summary>
 <div>
  
  ![youme-search](https://user-images.githubusercontent.com/61537853/177248305-09a63b6a-0686-49d9-aec3-6b111431e69f.png)

</div>
</details>


<details>
 <summary>Articles Post Page</summary>
 <div>
  
  ![youme-articles](https://user-images.githubusercontent.com/61537853/177248319-0ddcca4c-f13f-4cdd-b29e-cfa942346b1c.png)
  
</div>
</details>

<details>
 <summary>Article Post Detail Page</summary>
 <div>
  
![youme-post](https://user-images.githubusercontent.com/61537853/177248377-0495e5d6-09c0-490b-b52f-d1eb80df24c0.png)
  
</div>
</details>

<details>
 <summary>Community Page</summary>
 <div>
  
![youme-community](https://user-images.githubusercontent.com/61537853/177248592-f8eb397e-e4fb-47e4-ae16-a24ee8ff8eaa.png)
  
</div>
</details>

<details>
 <summary>Sign In Page</summary>
 <div>
 
![youme-signin](https://user-images.githubusercontent.com/61537853/177248527-a4548c6f-ea4b-4f48-9ff9-61a30c3687f1.png)
  
 </div>
</details>

<details>
 
 <summary>Sign Up Page</summary>
 <div>
     
![youme-signup-option](https://user-images.githubusercontent.com/61537853/177248551-8529f752-89da-4ac4-a505-b157e32698f8.png)
![youme-signup](https://user-images.githubusercontent.com/61537853/177248544-5ff66ee9-83c8-4a4a-af2a-47b27615d5e1.png)

</div>
</details>


Website To Watch Movie, Anime And TV Show Using ReactJS

Youme

## Overview
- Official website: [https://lamhoang1256.github.io/fashion-era-landingpage](https://lamhoang1256.github.io/fashion-era-landingpage)
- Author: Nguyễn Hoàng Lâm ([@lamhoang1256](https://github.com/lamhoang1256) )

## Resources
```
Figma Design: https://www.figma.com/file/6HsPyGkjEjolG0ZtuAIRfK
Google Font: https://fonts.google.com/specimen/Ubuntu
```

## Screenshots
<details>
 <summary>LandingPage</summary>
 <div>

![fashion-era-landingpage](https://user-images.githubusercontent.com/61537853/191945307-ddeed059-3d94-43fd-a1d7-f1a9259c439e.png)
</div>
</details>



Ecommerce Fashion Landingpage Using HTML Tailwindcss

Fashion Era Landingpage

## Overview

- Official website: https://netcomic.vercel.app
- Author: Nguyễn Hoàng Lâm ( [@lamhoang1256](https://github.com/lamhoang1256) )

## Preview

Dark Mode:
![home-darkmode·](https://user-images.githubusercontent.com/61537853/198968769-85739c4c-7b50-40a6-a38b-020a2eba05da.png)

Light Mode:
![home-lightmode](https://user-images.githubusercontent.com/61537853/198992036-e3b1c77e-93fa-483d-92f0-634b72c47bf0.png)

## Resources

- API: https://netcomic.vercel.app/api-doc (Crawl data from website Nhat Truyen - https://nhattruyenin.com)
- Font Family: Averta
- Icon: https://heroicons.com

## Main technology used

- NextJS, Typescript
- Firebase
- Tailwindcss
- Zustand (State management)
- Axios (Support fetching data)
- Swiper (Slider), react-modal (Modal)
- React-toastify, sweetalert2 (Message UI)
- Next-swagger-doc, swagger-ui-react (Document API)
- Cheerio (Crawl data from website Nhat Truyen)
- Other: react-tailwindcss-select, query-string, react-lazy-load-image-component, ...

## Features

- Suggested featured comics
- Search comic by name
- Filter by categories, top rank, date, ...
- Save comic history
- Follow comic you like
- Update information profile
- Level up through reading comic
- Comments (require sign in)
- Theme: dark mode, light mode

## Environment Variables

```
NEXT_PUBLIC_NHATTRUYEN = https://nhattruyenin.com
NEXT_PUBLIC_NODE_ENV = development (or production)
NEXT_PUBLIC_SERVER = http://localhost:3000 (or Link vercel)
NEXT_PUBLIC_LOCALHOST = http://localhost:3000

# See: https://firebase.google.com
NEXT_PUBLIC_FIREBASE_PUBLIC_API_KEY=
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=
NEXT_PUBLIC_FIREBASE_PROJECT_ID=
NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=
NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=
NEXT_PUBLIC_FIREBASE_APP_ID=
NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID=
```

## Screenshots

<details>
 <summary>Home page</summary>
 <div>
 
 Light mode
 ![home-light](https://user-images.githubusercontent.com/61537853/199261314-dc9dd474-6788-480d-9331-2d9f1305dd99.png)
  
 Dark mode
 ![home-dark](https://user-images.githubusercontent.com/61537853/199261622-593214a3-81d7-47db-96a5-57c1821d2777.png)

 </div>
</details>

<details>
 <summary>Comic details page</summary>
 <div>
 
 Light mode
 ![detail-light](https://user-images.githubusercontent.com/61537853/199262110-842c1379-c936-48be-89d0-04e0104892e8.png)
 
 Dark mode
 ![detail-dark](https://user-images.githubusercontent.com/61537853/199262083-0c10df07-afee-4007-a63e-86398565d2cb.png)

 </div>
</details>

<details>
 <summary>Read chapter comic page</summary>
 <div>
 
 Light mode
![read-light](https://user-images.githubusercontent.com/61537853/199382272-b640ef5f-9d52-4f57-bd57-d607696d4dde.png)

Dark mode
![read-dark](https://user-images.githubusercontent.com/61537853/199382257-162399ac-bf77-4e86-9138-562aa5a76aa6.png)

 </div>
</details>

<details>
 <summary>Boy genre comic page</summary>
 <div>
 
![boy](https://user-images.githubusercontent.com/61537853/198970223-59970bb5-54de-42d2-9495-aacdefd3c2cf.png)
 </div>
</details>

<details>
 <summary>Girl genre comic page</summary>
 <div>
 
 ![girl](https://user-images.githubusercontent.com/61537853/198970159-1ade4311-6a5f-4eb9-96e7-1edd3ec7672e.png)
 </div>
</details>

<details>
 <summary>History page</summary>
 <div>
 
![history](https://user-images.githubusercontent.com/61537853/198970281-e81a788d-401c-43a6-b606-4c70aeab8c2a.png)
 </div>
</details>

<details>
 <summary>Change password page</summary>
 <div>
 
  Light mode
 ![change-password-light](https://user-images.githubusercontent.com/61537853/199253432-7a8db713-8046-489b-af1c-ac19cc5ba2f5.png)
  
  Dark mode
 ![change-password-dark](https://user-images.githubusercontent.com/61537853/199253449-30fa4d95-984c-4d20-97b0-aba836085f35.png)

 </div>
</details>

<details>
 <summary>Profile page</summary>
 <div>
 
 Light mode
![profile-light](https://user-images.githubusercontent.com/61537853/199259731-b7ba73f6-aede-4af1-9864-ed5b7f499197.png)

Dark mode
![profile-dark](https://user-images.githubusercontent.com/61537853/199259756-f7703acc-18b7-4f71-81bf-15742ca1e28a.png)

 </div>
</details>

<details>
 <summary>Follow comic page</summary>
 <div>
 
 Light mode
![follow-light](https://user-images.githubusercontent.com/61537853/199262766-198b0fa9-742d-4f2f-ba7d-d05382cf8745.png)

Dark mode
![follow-dark](https://user-images.githubusercontent.com/61537853/199262785-ca158fd4-c914-4910-9eea-de8472e9d3bf.png)

 </div>
</details>

<details>
 <summary>Manage user page</summary>
 <div>
 
 Light mode
![manage-user-light](https://user-images.githubusercontent.com/61537853/199260057-5f5a6aba-c17f-42fd-b3b8-34456bae0753.png)

Dark mode
![manage-user-dark](https://user-images.githubusercontent.com/61537853/199260033-022c3513-4f8c-4aa5-a0c4-10fc219b5bb8.png)

 </div>
</details>

<details>
 <summary>Manage comment page</summary>
 <div>
 
 Light mode
![manage-comment-light](https://user-images.githubusercontent.com/61537853/199260143-292bc056-efee-4807-83e7-f1c6a4a91160.png)

Dark mode
![manage-comment-dark](https://user-images.githubusercontent.com/61537853/199260163-939ea4bc-f22d-4b07-b2fa-bab0ff661fb1.png)

 </div>
</details>

A Website Read Comic Using NextJS, Typescript, Firebase, Tailwindcss, Zustand

Projects