Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/thagoo/hobby-clone-frontend

Banao Assignment To develop a static site using NextJS and Bootstrap with a given design.
https://github.com/thagoo/hobby-clone-frontend

bootstrap nextjs14

Last synced: 13 days ago
JSON representation

Banao Assignment To develop a static site using NextJS and Bootstrap with a given design.

Awesome Lists containing this project

README

        

# This is a assignment given by Banao.com for the Internship shortlisting

## Project Overview

To develop a static site using NextJS and Bootstrap with a given design.

## Live Demo

/
You can view a live demo of the project [Please note this site is hosted in free on render so it takes 20 sec for initial load]
[home page](https://nextjs-task-0hn1.onrender.com/).
[landing page](https://nextjs-task-0hn1.onrender.com/landing)

## Project Implementation

The web page has been developed to be an exact replica of the design provided in the Figma link using NextJS and Bootstrap.

The following technologies and best practices have been employed:

- **Javascript, HTML, CSS, NextJS and Bootstrap:** The project utilizes a combination of these technologies to create a responsive and visually appealing web page.

- **Responsive Design:** The webpage is designed to be fully responsive and should adapt seamlessly to various device widths without any breakage.

- **Components and Containers:** Proper use of components and containers has been maintained to ensure code modularity, scalability and reusability.

- **Login & Signup Modals:** The login and signup modals are implemented to appear on click, similar to any other modals (non functional).

## Getting Started

To run this project locally, follow these steps:

1. Clone the repository to your local machine:

```
git clone https://github.com/thagoo/nextjs-task.git
```

2. Navigate to the project directory:

```
cd nextjs-task
```

3. Install dependencies:

```
npm install
```

4. Build the project

```
npm run build
```

5. Run the production server locally

```
npm run start
```

or

4. Run the development server:

```
npm run dev
```

This will start the respective server, and you can view the webpage by accessing http://localhost:3000 in your browser.

Thank you for checking out my project!