https://github.com/livewithcodeankit/fieldgoal
NextJs13 with Tailwind CSS Templet
https://github.com/livewithcodeankit/fieldgoal
css-flexbox css-grid css3 frontend html-css-javascript html5 next13 nextjs reactjs tailwindcss
Last synced: 8 months ago
JSON representation
NextJs13 with Tailwind CSS Templet
- Host: GitHub
- URL: https://github.com/livewithcodeankit/fieldgoal
- Owner: LiveWithCodeAnkit
- Created: 2023-07-27T10:18:14.000Z (over 2 years ago)
- Default Branch: master
- Last Pushed: 2023-09-25T18:08:57.000Z (about 2 years ago)
- Last Synced: 2025-03-24T18:11:14.451Z (9 months ago)
- Topics: css-flexbox, css-grid, css3, frontend, html-css-javascript, html5, next13, nextjs, reactjs, tailwindcss
- Language: JavaScript
- Homepage: https://fieldgoal.vercel.app
- Size: 384 KB
- Stars: 4
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Frontend Replica of Fieldgoal.io
## Description
This project is a frontend replica of the popular Fieldgoal) website, developed using cutting-edge technologies to provide a seamless user experience. The primary objective was to recreate the website's frontend while incorporating modern web development practices and tools.
## Technologies Used
- **Next.js version 13:** We leveraged the power of Next.js 13, a React framework, to enable server-side rendering, smooth routing, and enhanced performance. This ensures a fast and responsive user interface.
- **Conditional Layout:** To make the website adaptive across different screen sizes and devices, we implemented conditional layout techniques, allowing the content to adjust gracefully.
- **Router:** The implementation of the Next.js router facilitated seamless navigation between pages, providing a fluid user experience.
- **Custom Hook:** By utilizing custom hooks, we streamlined complex functionalities and reused code for better maintainability and scalability.
- **Formik and Yup Validation:** We integrated Formik and Yup to manage form states and ensure robust form validation. This guarantees that user inputs are validated effectively, providing a seamless form submission process.
- **Tailwind CSS with Animation:** Tailwind CSS, a utility-first CSS framework, was employed to style the website efficiently. Additionally, we incorporated animations to create an engaging and interactive user interface.
## Features
- **Responsive Design:** The website adapts elegantly to various screen sizes and devices, ensuring a consistent and pleasant user experience.
- **Interactive Animations:** Engaging animations were implemented throughout the website, adding flair to user interactions and enhancing visual appeal.
- **Form Validation:** Formik and Yup were utilized to validate user input in forms, ensuring data integrity and enhancing error handling.
- **Smooth Navigation:** The Next.js router facilitates seamless navigation between pages, reducing page load times and providing a smooth browsing experience.
## Installation and Usage
1. Clone the repository: `git clone https://github.com/your-username/your-repo.git`
2. Navigate to the project directory: `cd your-repo`
3. Install the dependencies: `npm install` or `yarn install`
4. Run the development server: `npm run dev` or `yarn dev`
5. Open your browser and visit: `http://localhost:3000`
## Contributing
Contributions are welcome! If you encounter any issues or have suggestions for improvements, feel free to submit a pull request or open an issue. Please follow the existing code style and conventions to maintain consistency.