https://github.com/emredevsalot/unusual-buildings

Unusual Buildings is a showcase of extraordinary and unique architectural wonders from around the world. I wanted to show my skills in creating a multi-page application with smooth animations.
https://github.com/emredevsalot/unusual-buildings

framer-motion react react-router-dom sass typescript

Last synced: 13 days ago
JSON representation

Unusual Buildings is a showcase of extraordinary and unique architectural wonders from around the world. I wanted to show my skills in creating a multi-page application with smooth animations.

• Host: GitHub
• URL: https://github.com/emredevsalot/unusual-buildings
• Owner: emredevsalot
• Created: 2023-06-01T15:43:46.000Z (over 1 year ago)
• Default Branch: master
• Last Pushed: 2023-06-11T19:27:23.000Z (over 1 year ago)
• Last Synced: 2024-12-15T04:10:24.823Z (2 months ago)
• Topics: framer-motion, react, react-router-dom, sass, typescript
• Language: TypeScript
• Homepage: https://emredevsalot.github.io/unusual-buildings/
• Size: 320 KB
• Stars: 2
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Unusual Buildings

Unusual Buildings is a showcase of extraordinary and unique architectural wonders from around the world. I wanted to show my skills in creating a **multi-page application with smooth animations**.

## Technologies Used

- **React**: A popular JavaScript library for building user interfaces. It provides a flexible and efficient way to create dynamic web applications.

- **react-router-dom**: The react-router-dom library is utilized to handle routing and navigation within the application. It enables seamless navigation between different pages and facilitates passing URL parameters for channel selection.

- **Framer Motion**: An animation library for React that facilitates the creation of smooth and visually captivating animations and transitions throughout the site.

## Lessons Learned

- Understanding and implementing **routing** in React using react-router-dom.

- Integrating **animations and transitions** effectively using the framer-motion library.

- Creating **reusable** components to maintain a consistent design and code structure.

- **Managing state** and data flow in a multi-page application using React's component-based architecture.

## Installation

### 1 - Clone the repository:

```console

git clone https://github.com/emredevsalot/unusual-buildings.git

```

### 2 - Navigate to the project directory:

```console

cd unusual-buildings

```

### 3 - Install dependencies:

```console

npm install

```

### 4 - Start the development server:

```console

npm run dev

```