✨ Update home and error pages UI (#141)

Co-authored-by: Rohan Gupta <rohan.gupta@gameskraft.com>

.eslintrc.js

@@ -17,7 +17,7 @@ module.exports = {
   globals: {},
   extends: ['eslint:recommended', 'plugin:react/recommended', 'standard-with-typescript', 'plugin:import/typescript', 'plugin:prettier/recommended'],
   plugins: ['react', 'react-hooks', 'prettier'],
-  ignorePatterns: ['tsconfig.json', '.eslintrc.js', 'todos.ts'],
+  ignorePatterns: ['tsconfig.json', '.eslintrc.js', 'todos.ts', 'build/'],
   rules: {
     'prettier/prettier': 0,
     semi: 0,

README.md

@@ -5,7 +5,7 @@
 ![GitHub repo forks](https://img.shields.io/github/forks/DemonDaddy22/frontend-expert?color=%238BC7E6&style=for-the-badge)
 ![GitHub repo size](https://img.shields.io/github/repo-size/demondaddy22/frontend-expert?color=%236495ED&style=for-the-badge)
 
-**Frontend-Expert** contains bunch of exercises available in the [FrontendExpert](https://www.algoexpert.io/frontend/product) course. All the implementations have been done in ReactJS for consistency. A CI/CD pipeline will be setup soon and exercises done up till that point can be easily viewed as a part of the deployed website. Detailed description can be found in each exercise's README.
+**Frontend-Expert** contains bunch of exercises available in the [FrontendExpert](https://www.algoexpert.io/frontend/product) course. All the implementations have been done in ReactJS for consistency. All the exercises can be viewed in this [deployed website](https://frontend-expert-demondaddy22.vercel.app/fe/exercise/array-methods). Detailed description can be found in each exercise's README.
 
 ## Exercises
 

src/components/IndexRoute/index.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import classes from './styles.module.scss';
+import { QUESTIONS_INFO } from '../../constants/questions';
+import { Link } from 'react-router-dom';
+
+const IndexRoute: React.FC<Props> = () => {
+  return (
+    <section className={classes.container}>
+      <h1 className={classes.title}>Hey there! 👋🏼</h1>
+      <p>
+        The FrontendExpert course takes you through the essential technologies and concepts of the frontend ecosystem. The course can be purchased
+        through{' '}
+        <Link to='https://www.algoexpert.io/frontend/product' target='_blank' rel='noopener noreferrer'>
+          AlgoExpert website
+        </Link>
+        .
+      </p>
+      <p>
+        Although I had already attempted the exercises on their coding platform, but for the sake of practising further, I thought of creating this
+        simple website which is a collection of all the questions and their solutions. You can browse through the list of questions mentioned in the
+        sidebar and open up any question to view further details.
+      </p>
+      <p>
+        Some of the questions involve usage of certain APIs to fetch data and implement the solution, but due to CORS, their internal APIs are not
+        accessible. I have explored and used some free alternatives here in order to implement the question. I have pointed out the same in such
+        questions as well, but just in case I missed out on explicitly mentioning the API endpoints, you can open up the browser's console and head
+        over to the network tab for more details.
+      </p>
+      <p>
+        <Link to={`fe/exercise/${QUESTIONS_INFO[0].id}`}>Click here</Link> to dive into the first question or select any question of your choice from
+        the sidebar. Happy learning!
+      </p>
+    </section>
+  );
+};
+
+export default IndexRoute;

src/components/IndexRoute/styles.module.scss

@@ -0,0 +1,40 @@
+@import '../../constants/theme.scss';
+@import '../../utils/mixins.scss';
+
+.container {
+  @include spacing(3rem 2rem);
+  max-width: 60rem;
+
+  @media screen and (min-width: 1200px) {
+    @include spacing(4rem 8rem);
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+  }
+
+  & p {
+    @include theme(color, contrast1Opacity90);
+    @include spacing(0.5rem 0);
+
+    & a {
+      @include theme(color, yellow1);
+
+      &:hover {
+        filter: brightness(80%);
+      }
+    }
+  }
+}
+
+.title {
+  @include theme(color, red1);
+  @include spacing(1rem 0);
+  font-size: 3rem;
+  letter-spacing: -0.5px;
+  word-spacing: -1rem;
+
+  @media screen and (min-width: 1200px) {
+    @include spacing(2rem 0);
+    font-size: 4rem;
+  }
+}

src/constants/theme.scss

@@ -80,7 +80,7 @@ $LIGHT: (
   blue1: #214789,
   red1: #9d092b,
   green1: #60a911,
-  yellow1: #d9c913,
+  yellow1: #bbad12,
   blue2: #b9d1fb,
   red2: #f4aabb,
   green2: #c9f699,

src/router.tsx

@@ -4,6 +4,7 @@ import App from './App';
 import Error from './screens/Error';
 import ThemeContextProvider from './context/ThemeContext';
 import { QUESTIONS_INFO } from './constants/questions';
+import IndexRoute from './components/IndexRoute';
 
 const getExerciseRoutes = () =>
   QUESTIONS_INFO.map((question) => ({
@@ -16,7 +17,7 @@ const router = createBrowserRouter([
     path: '/',
     element: <App />,
     errorElement: <Error />,
-    children: getExerciseRoutes(),
+    children: [{ index: true, element: <IndexRoute /> }, ...getExerciseRoutes()],
   },
 ]);
 

src/screens/Error/index.tsx

@@ -1,19 +1,24 @@
 import React from 'react';
-import { useRouteError } from 'react-router-dom';
+import { Link, useRouteError } from 'react-router-dom';
 import classes from './styles.module.scss';
+import QuestionsMenu from '../../components/ProjectPage/components/QuestionsMenu';
+import ProjectNavbar from '../../components/ProjectNavbar';
 
-// TODO - improve design
 const Error: React.FC<Props> = () => {
   const error: any = useRouteError();
 
   return (
-    <div className={classes.error}>
-      <h1 className={classes.title}>Oops!</h1>
-      <p className={classes.subtitle}>Sorry, an unexpected error has occurred.</p>
-      <p className={classes.description}>{error.statusText || error.message}</p>
-      <a href='/' className={classes.redirection}>
-        Go to Home
-      </a>
+    <div className='container'>
+      <QuestionsMenu />
+      <div className={classes.error}>
+        <h1 className={classes.title}>Oops!</h1>
+        <p className={classes.subtitle}>Sorry, an unexpected error has occurred.</p>
+        <p className={classes.description}>{error.statusText || error.message}</p>
+        <Link to='/' className={classes.redirection}>
+          Go to Home
+        </Link>
+      </div>
+      <ProjectNavbar />
     </div>
   );
 };

src/screens/Error/styles.module.scss

@@ -1,48 +1,54 @@
 @import '../../constants/theme.scss';
 @import '../../utils/mixins.scss';
 
+.container {
+  @include theme(background-color, accent3);
+  display: flex;
+  flex-direction: column;
+
+  @media screen and (min-width: 1200px) {
+    height: 100vh;
+    width: 100vw;
+    overflow: hidden;
+    flex-direction: row;
+  }
+}
+
 .error {
-  @include theme(background, errorScreenBG);
   @include spacing(2rem);
-  width: 100vw;
-  height: 100vh;
-  overflow: hidden;
   display: flex;
   flex-direction: column;
   justify-content: center;
   gap: 0.5rem;
 
-  @media screen and (min-width: 992px) {
-    @include spacing(4rem);
-  }
-
   @media screen and (min-width: 1200px) {
-    @include spacing(10rem);
+    @include spacing(4rem 6rem);
   }
 }
 
 .title {
-  @include theme(color, contrast2);
+  @include theme(color, red1);
   font-size: 3rem;
 
-  @media screen and (min-width: 992px) {
+  @media screen and (min-width: 1200px) {
     font-size: 4rem;
   }
 }
 
 .subtitle {
-  @include theme(color, contrast1);
+  @include theme(color, contrast1Opacity70);
+  font-size: 1.5rem;
 }
 
 .description {
-  @include spacing(0.5rem 0);
-  @include theme(color, contrast1Opacity60);
-  font-size: 1.25rem;
+  @include theme(color, contrast1Opacity70);
+  font-size: 1.5rem;
+  font-weight: 500;
 }
 
 .redirection {
-  @include theme(color, blue1);
-  text-decoration: underline;
+  @include theme(color, yellow1);
+  @include spacing(2rem 0);
   font-size: 0.9rem;
   letter-spacing: -0.5px;
   word-spacing: -4px;