Migrating to Next.js and adding download script.

.eslintignore

@@ -1,2 +1,3 @@
 node_modules/
-build/
+build/
+.next/

.eslintrc

@@ -1,49 +1,3 @@
 {
-  "env": {
-    "browser": true,
-    "es2021": true,
-    "node": true
-  },
-  "extends": [
-    "eslint:recommended",
-    "plugin:react/recommended",
-    "plugin:react-hooks/recommended"
-  ],
-  "parserOptions": {
-    "ecmaFeatures": {
-      "jsx": true
-    },
-    "ecmaVersion": 12,
-    "sourceType": "module"
-  },
-  "plugins": [
-    "react"
-  ],
-  "settings": {
-    "react": {
-      "version": "detect"
-    }
-  },
-  "rules": {
-    "indent": [
-      "error",
-      2,
-      {
-        "SwitchCase": 1
-      }
-    ],
-    "quotes": [
-      "error",
-      "double"
-    ],
-    "semi": [
-      "error",
-      "always"
-    ],
-    "react/react-in-jsx-scope": "off",
-    "eol-last": [
-      "error",
-      "always"
-    ]
-  }
-}
+  "extends": "next"
+}

.gitignore

@@ -25,3 +25,4 @@ yarn-error.log*
 .eslintcache
 
 .vercel
+.next

.prettierrc.json

@@ -0,0 +1,3 @@
+{
+  "trailingComma": "none"
+}

README.md

@@ -1,5 +1,23 @@
 # League of React
 
-* [Color palette](https://colorhunt.co/palette/219713)
+Visualize the League of Legends champions.
 
-* [Free icons - FontAwesome](https://fontawesome.com/)
+## Screenshots
+
+**Homepage**
+![Homepage screenshot](/docs/images/home.png)
+
+**Champion page**
+![Champion page screenshot](/docs/images/champion.png)
+
+## Upcoming features
+
+- [ ] Desktop design.
+- [ ] Filter champions.
+- [ ] Extract the color of the champions.
+
+## Resources
+
+- [Data Dragon](https://developer.riotgames.com/docs/lol#data-dragon)
+- [Color Hunt](https://colorhunt.co/palette/219713)
+- [FontAwesome](https://fontawesome.com/)

jsconfig.json

@@ -1,5 +1,12 @@
 {
   "compilerOptions": {
-    "baseUrl": "./src"
+    "baseUrl": ".",
+    "paths": {
+      "@/assets/*": ["src/assets/*"],
+      "@/components/*": ["src/components/*"],
+      "@/hooks/*": ["src/hooks/*"],
+      "@/public/*": ["public/*"],
+      "@/styles/*": ["src/styles/*"]
+    }
   }
-}
+}

next.config.js

@@ -0,0 +1,14 @@
+module.exports = {
+  images: {
+    domains: ["ddragon.leagueoflegends.com"]
+  },
+  reactStrictMode: true,
+  webpack: (config) => {
+    config.module.rules.push({
+      test: /\.svg$/,
+      use: ["@svgr/webpack"]
+    });
+
+    return config;
+  }
+};