refactor: Reorder Folder Structure removing front-end folder

Reorganizing folder to adapt a app that dont need a back end.
Readme added more instructions.

.gitignore

@@ -1,10 +1,10 @@
 # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 
-### NextJS ###
 # dependencies
 /node_modules
 /.pnp
 .pnp.js
+.yarn/install-state.gz
 
 # testing
 /coverage
@@ -24,7 +24,6 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
-.pnpm-debug.log*
 
 # local env files
 .env*.local
@@ -35,5 +34,3 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
-
-# End of https://www.toptal.com/developers/gitignore/api/nextjs

README.md

@@ -4,11 +4,11 @@
 
 Project of animes and mangas website, utilizing the <a href='https://anilist.gitbook.io/anilist-apiv2-docs/'>AniList</a> API which has info of animes and mangas released, data of the cast of that media, and many other things.
 
-You can access it <a href='https://aniproject-dev.netlify.app/'>here</a>.
+<p align="center">You can access it <a href='https://aniproject-dev.netlify.app/'>here</a>.</p>
 
 ## :hammer: Features
 
-- [x] `Search`: Get a list of animes and mangas you want to search.
+- [x] `Search`: Get a list of all animes and mangas you want using filters.
 - [x] `Watch`: Watch any available episode.
 - [x] `Read`: Read any manga chapter available.
 - [x] `Comment`: Write what you thougth of that episode or just tell something that every should know about.
@@ -48,21 +48,21 @@ Its simple!
   git clone https://github.com/ErickLimaS/anime-website.git
   ```
 
-2. From the ``front-end directory``, run ``npm install`` on your CMD to get all dependencies
+2. Run ``npm install`` on your CMD to get all dependencies
   ```javascript
   npm install
   ```
 
-3. Now you need to create a ``.env.local`` file inside the ``front-end directory`` with the url to where your Consumet API server is setted and configs for your Firebase.
+3. Now you need to create a ``.env.local`` file inside the ``directory`` with the url to where your Consumet API server is setted and configs for your Firebase.
    - Check the <a href='https://github.com/consumet/api.consumet.org'>repository of Consumet API</a> and host your own server.
-   - Get to the <a href='https://github.com/manami-project/anime-offline-database'>this repository of a JSON file filled with Animes info to use.</a>.
-   - This repository already has this json file, but it might be outdated. So get a new file there and put it under the ``front-end/app/api/anime-info`` directory.
+   - Go to <a href='https://github.com/manami-project/anime-offline-database'>this repository</a> and get a JSON file filled with Animes info to use.
+   - This repository already has this json file, but it might be outdated. So get a new file there and put it under the ``/app/api/anime-info`` directory.
    - On Firebase, get your config to use the Authentication and Firestore Database.
 
    Your file should look like example:
   ```javascript
   NEXT_PUBLIC_CONSUMET_API_URL=https://your-hosted-consumet-api-url.com
-  NEXT_PUBLIC_INSIDE_API_URL=https://your-hosted-website-url.com/api/anime-info
+  NEXT_PUBLIC_INSIDE_API_URL=https://url-to-where-your-website-is-hosted.com/api/anime-info
   NEXT_PUBLIC_FIREBASE_API_KEY=[YOUR-FIREBASE-SETTINGS]
   NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=[YOUR-FIREBASE-SETTINGS]
   NEXT_PUBLIC_FIREBASE_PROJECT_ID=[YOUR-FIREBASE-SETTINGS]
@@ -73,7 +73,7 @@ Its simple!
   NEXT_PUBLIC_FIREBASE_DATABASE_URL=[YOUR-FIREBASE-SETTINGS]
   ```
 
-4. From ``front-end directory``, run ``npm run dev`` to initialize the website
+4. Now run ``npm run dev`` to initialize the website
   ```javascript
   npm run dev
   ```
@@ -105,6 +105,11 @@ Its simple!
 ![Watch Episode Page1](https://github.com/ErickLimaS/anime-website/assets/69987890/7df405d1-6b2b-4866-8c48-4c0eb7f14c5d)
 ![Watch Episode Page 2](https://github.com/ErickLimaS/anime-website/assets/69987890/d8a1998c-df5d-4904-b40c-aa71c3aff2dc)
 
+### Search/Filter Page
+
+![Search/Filter Page 1](https://github.com/ErickLimaS/anime-website/assets/69987890/73e09258-c927-43cf-9a02-6ddfb4af5b14)
+![Search/Filter Page 2](https://github.com/ErickLimaS/anime-website/assets/69987890/497b35fe-4c6e-464a-9cc4-3a338db9d4cf)
+
 ### Playlist Page
 
 ![Playlist page 1](https://github.com/ErickLimaS/anime-website/assets/69987890/c8ed47e5-6ac8-4ec2-adc4-fdbf2119cc11)

front-end/app/layout/header/components/UserSideMenu/component.module.css → app/layout/header/components/UserSideMenu/component.module.css

@@ -13,7 +13,7 @@
 
 }
 
-#user_container #user_btn[data-userActive=false] {
+#user_container #user_btn[data-useractive=false] {
 
     height: inherit;
 
@@ -31,11 +31,11 @@
 
 }
 
-#user_container #user_btn[data-userActive=false]:hover {
+#user_container #user_btn[data-useractive=false]:hover {
     box-shadow: 3px 3px;
 }
 
-#user_container #user_btn[data-userActive=false] span {
+#user_container #user_btn[data-useractive=false] span {
 
     color: var(--white-100);
 

front-end/app/layout/header/components/UserSideMenu/index.tsx → app/layout/header/components/UserSideMenu/index.tsx

@@ -61,7 +61,7 @@ function UserSideMenu() {
                         aria-label={isUserMenuOpen ? 'Click to Hide User Menu' : 'Click to Show User Menu'}
                         className={`display_flex_row align_items_center ${styles.heading_btn}`}
                         id={styles.user_btn}
-                        data-userActive={false}
+                        data-useractive={false}
                     >
                         <PersonIcon className={styles.scale} alt="User Icon" width={16} height={16} />
                         <span>
@@ -93,7 +93,7 @@ function UserSideMenu() {
                         aria-label={isUserMenuOpen ? 'Click to Hide User Menu' : 'Click to Show User Menu'}
                         className={`display_flex_row align_items_center ${styles.heading_btn}`}
                         id={styles.user_btn}
-                        data-userActive={true}
+                        data-useractive={true}
                     >
                         <span id={styles.img_container}>
                             <Image

front-end/app/search/components/NavSideBar/index.tsx → app/search/components/NavSideBar/index.tsx

@@ -201,8 +201,8 @@ function NavSideBar({ isMobile }: { isMobile: boolean }) {
                         {/* SHOW IF IT IS MOBILE AND MENU IS OPEN, OR IF IS NOT MOBILE (ON DESKTOP) AND MENU IS CLOSED */}
                         {((isMobile && openFiltersMenu == true) || (!isMobile && !openFiltersMenu)) && (
                             <motion.div
-                                onClick={(e) => e.stopPropagation()}
-                                onScrollCapture={(e) => e.stopPropagation()}
+                                onClick={(e: { stopPropagation: () => any }) => e.stopPropagation()}
+                                onScrollCapture={(e: { stopPropagation: () => any }) => e.stopPropagation()}
                                 id={styles.container}
                                 variants={showUpMotion}
                                 initial="hidden"
@@ -223,7 +223,7 @@ function NavSideBar({ isMobile }: { isMobile: boolean }) {
                                                     <input
                                                         type='checkbox'
                                                         value={item.value}
-                                                        checked={urlQuery.get("genre")?.includes(item.value)}
+                                                        defaultChecked={urlQuery.get("genre")?.includes(item.value)}
                                                         onClick={(e) => fetchData("genre", e.target)}>
                                                     </input>
                                                 </label>
@@ -245,7 +245,6 @@ function NavSideBar({ isMobile }: { isMobile: boolean }) {
                                         <option value="any">Any</option>
                                         {range(60).map((item, key) => (
                                             <option
-                                                selected={urlQuery.get("year")?.search(`/\b${new Date().getFullYear() - item}\b/`) == 1 ? true : false}
                                                 key={key}
                                                 value={new Date().getFullYear() - item}
                                             >
@@ -268,7 +267,7 @@ function NavSideBar({ isMobile }: { isMobile: boolean }) {
                                                     <input
                                                         type='checkbox'
                                                         value={item.value}
-                                                        checked={urlQuery.get("type")?.includes(item.value)}
+                                                        defaultChecked={urlQuery.get("type")?.includes(item.value)}
                                                         onClick={(e) => fetchData("type", e.target)}>
                                                     </input>
                                                 </label>
@@ -291,7 +290,7 @@ function NavSideBar({ isMobile }: { isMobile: boolean }) {
                                                     <input
                                                         type='checkbox'
                                                         value={item.value}
-                                                        checked={urlQuery.get("status")?.includes(item.value)}
+                                                        defaultChecked={urlQuery.get("status")?.includes(item.value)}
                                                         onClick={(e) => fetchData("status", e.target)}>
                                                     </input>
                                                 </label>
@@ -315,7 +314,7 @@ function NavSideBar({ isMobile }: { isMobile: boolean }) {
                                                     <input
                                                         type='checkbox'
                                                         value={item.value}
-                                                        checked={urlQuery.get("season")?.includes(item.value)}
+                                                        defaultChecked={urlQuery.get("season")?.includes(item.value)}
                                                         onClick={(e) => fetchData("season", e.target)}>
                                                     </input>
                                                 </label>

front-end/app/search/components/ResultsContainer/index.tsx → app/search/components/ResultsContainer/index.tsx

@@ -60,17 +60,21 @@ function ResultsContainer({ data, totalLength, lastUpdate }: { data: MediaDbOffl
                 <div className='display_flex_row align_items_center'>
                     <SvgFilter height={16} width={16} alt="Filter Icon" />
                     <form>
-                        <select title="Sort the results" onChange={(e) => fetchData(e.target)}>
-                            <option value="title_asc" selected={new URLSearchParams(Array.from(searchParams.entries())).get("sort")?.includes("title_asc")}>
+                        <select
+                            title="Sort the results"
+                            onChange={(e) => fetchData(e.target)}
+                            defaultValue={new URLSearchParams(Array.from(searchParams.entries())).get("sort") || "title_asc"}
+                        >
+                            <option value="title_asc">
                                 From A to Z
                             </option>
-                            <option value="title_desc" selected={new URLSearchParams(Array.from(searchParams.entries())).get("sort")?.includes("title_desc")}>
+                            <option value="title_desc" >
                                 From Z to A
                             </option>
-                            <option value="releases_desc" selected={new URLSearchParams(Array.from(searchParams.entries())).get("sort")?.includes("releases_desc")}>
+                            <option value="releases_desc">
                                 Release Desc
                             </option>
-                            <option value="releases_asc" selected={new URLSearchParams(Array.from(searchParams.entries())).get("sort")?.includes("releases_asc")}>
+                            <option value="releases_asc">
                                 Release Asc
                             </option>
                         </select>

front-end/package.json → package.json

@@ -1,6 +1,6 @@
 {
-  "name": "front-end",
-  "version": "2.3.0",
+  "name": "aniproject",
+  "version": "2.3.5",
   "private": true,
   "scripts": {
     "dev": "next dev",