Stutern Housemanship - Handout Documentation by Adaobi Ezelioha
Tags: stuternhousemanship, stutern, jsconfig, frontend
Published: 2022-10-20 15:45:13

## Task 1- Implementing JsConfig to Handout Project

Creating `jsconfig.json` file in your project will make it easier to develop complex javascript applications that have a lot of different folders by using absolute paths. 

**Step 1** -- **Creating jsconfig.json file**
In the root directory of my project (ie the app folder), I created a new file named `jsconfig.json` as shown below.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xm6eu8jfho7krhmxop86.png)

**Step 2** -- **Configure the path**
In this jsconfig.json file, I added a `compilerOptions` key and set the `baseUrl` to `src`. You can also include an `include` key and set it to `src` array. That's all

```
{
    "compilerOptions": {
        "baseUrl": "src"
    },
    "include": ["src"]
}
```
 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/orzc4ow4a1j9ptem8gi0.png)


## Task 2 - Implementing Tailwind CSS
Tailwind CSS is a utility-first CSS framework which means we can use utility classes to build custom designs without writing CSS as in traditional approach. 

**Step 1 -- Install Tailwind CSS**
Install `tailwindcss` and its peer dependencies via npm, and then run the init command to generate both `tailwind.config.js` and `postcss.config.js`.

```
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
```

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cdm4uskzl2bne58cmz8j.png)





**Step 2 -- Configure your tempelate paths**
Add the paths to all of your template files in your `tailwind.config.js` file.

```
content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
```

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dzbg4fgi17qk84qja33h.png)



**Step 3 -- Add the Tailwind directives to your CSS**
Add the `@tailwind` directives for each of Tailwind’s layers to your `./src/index.css` file.

```
@tailwind base;
@tailwind components;
@tailwind utilities;
```

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lcxq43ay6bkoq75d79l7.png)


**Step 4 -- Start your build process**
Run your build process with `npm run start` in your terminal and start using Tailwind’s utility classes to style your content.

```
npm run start
```
[tailwindcss documentation](https://tailwindcss.com/docs/guides/create-react-app)

## Task 3 —Implementing layout and functionality for forgot password pages 1 & 2
This was to implement the page where users who forgot their password will be routed, to get a confirmation in their mail to get a new password.

**Step 1--** I created two components in the pages folder and named them `ForgotPassword` and `ForgotPassword2`.

**Step 2--** I added the both components to the `NonAuthRoutes` object in the `url.jsx` component using the below lines of code

```
ForgotPassword: "/forgot-password",
ForgotPassword2: "/forgot-password2",
```
**Step 3--** I routed the forgot password link in the login component to the ForgotPassword component using link from react-router-dom after it was imported using the code below.

```
import { Link } from "react-router-dom";
<Link
to="/forgot-password"
className=" text-[#424242] underline my-[16px] "
>
Forgot Password
</Link>
```
**Step 4--** I designed the layout with tailwind and routed the continue button (with a `handleclick` function) to the ForgotPassword2 component that displays that a mail have been sent to confirm the request using the code below.

```
const handleClick = () => {
navigate("/forgot-password2");
};
```
However, to use the `navigate` in the function, `useNavigate` was imported and stored in a variable so it can always be invoked using the code below

```
import { useNavigate } from "react-router-dom";
const navigate = useNavigate();
```
**Step 5--** The okay button in the `ForgotPassword2` was now routed to the login page as password must have been sent to the user’s mail already. I used an `onClick` attribute on the button and attached a `handleClick` function.

```
const handleClick = () => {
navigate("/login");
};
```
**Step 6--** Finally, I did the responsive design for mobile screen with tailwind.