https://github.com/nerodcd/website-fundix-learning
Simple Fintech Landing Page using React and Tailwind / Fundamentals of React / Static Website / Front-End Development
https://github.com/nerodcd/website-fundix-learning
front-end frontend react tailwind website
Last synced: 5 months ago
JSON representation
Simple Fintech Landing Page using React and Tailwind / Fundamentals of React / Static Website / Front-End Development
- Host: GitHub
- URL: https://github.com/nerodcd/website-fundix-learning
- Owner: NeroDCD
- Created: 2024-08-27T17:53:39.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2025-10-08T02:18:51.000Z (9 months ago)
- Last Synced: 2025-10-08T04:07:58.142Z (9 months ago)
- Topics: front-end, frontend, react, tailwind, website
- Language: JavaScript
- Homepage: https://fundix.vercel.app
- Size: 2.01 MB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## 💻 Introduction
- This project was developed by following the YouTube tutorial **"React JS & Tailwind CSS Responsive Website - Beginner Friendly"** by **Adrian Hajdin**.
- The tutorial demonstrates how to build a fully responsive landing page using **React** and **Tailwind CSS** from scratch.
---
## 🔗 Tutorial Reference
- [React JS & Tailwind CSS Responsive Website - Beginner Friendly](https://youtu.be/ZU-drSVodBw)
---
## ⚙️ Tech Stack
- **Vite**
- **React.js**
- **Tailwind CSS**
---
## 💻 Customizations and Enhancements
While following the tutorial, I made several modifications to improve functionality and design:
- Replaced `React-Typed` with `react-typing-effect` for smoother text animations
- Added new sections such as the **Benefits** component and a **Hero badge**
- Created reusable styles in `index.css` and `tailwind.config.js`
- Used different assets and refined the layout
---
## 📦 Key Packages
- [react-typing-effect](https://www.npmjs.com/package/react-typing-effect) — Typing animation for React components
- [react-icons](https://react-icons.github.io/react-icons/) — Popular icon set for React projects
---
## ⚙️ Getting Started
To get started with this project, clone the repository and install the dependencies:
```bash
git clone
cd
npm install
```
## ⚙️ Start the server
To start the development server, run:
```bash
npm run dev
```
## ⚙️ Production build
To create a production build, run:
```bash
npm run build
```
## ⚙️ Guide for Creating and Setting Up the Project from Scratch
📃 **Note:** The tutorial mentioned above used Yarn for setting up the project, but I prefer to use npm.
- [Installing Tailwind CSS with Vite](https://tailwindcss.com/docs/guides/vite)
A comprehensive guide to setting up Tailwind CSS in a React + Vite project.