web-next.js

Repository created as a way of showing the different components and elements I create en Next.js, tailwind, etc.

web-next.js

An advanced web application built with Next.js, showcasing various components and modern web development practices. This project serves as a comprehensive template for building scalable and high-performance web applications.

Table of Contents

• Features
• Demo
• Technologies Used
• Getting Started
  • Prerequisites
  • Installation
• Usage
  • Development Server
  • Building for Production
  • Running Tests
• Directory Structure
• Contributing
• License

Features

• Next.js for server-side rendering and static site generation.
• TypeScript for static typing and improved developer experience.
• Tailwind CSS for utility-first styling.
• Jest for unit and integration testing.
• Framer Motion for animations.
• Lucide React for iconography.
• GitHub Actions for continuous integration and deployment (planned).
• Vercel deployment for seamless hosting and scaling.

Demo

Check out the live demo of the project here.

Technologies Used

• Next.js 15.0.2: A React framework for server-side rendering and static site generation.
• TypeScript 5.0: Adds optional static typing to JavaScript.
• Tailwind CSS 3.4.1: A utility-first CSS framework.
• Jest 29.7.0: A delightful JavaScript testing framework.
• Framer Motion 11.10.0: An open source React library to power production-ready animations.
• Lucide React 0.454.0: A library of simply beautiful open source icons.
• Git: Version control system for tracking changes.
• Vercel: Cloud platform for static sites and Serverless Functions.

Getting Started

Prerequisites

• Node.js (v14 or higher)
• npm (v6 or higher)
• Git

Installation

1. Clone the repository

   git clone https://github.com/your-username/web-next.js.git

2. Navigate to the project directory

   cd web-next.js

3. Install dependencies

   npm install

Usage

Development Server

Start the development server with:

npm run dev

This will start the app on http://localhost:3000 with hot-reloading enabled.

Building for Production

To build the application for production, run:

npm run build

This will generate an optimized production build in the .next directory.

Running Tests

To run the test suite using Jest:

npm test

This will execute all tests located in the __tests__ directory.

Directory Structure

web-next.js/
├── __tests__/
│   └── Home.test.tsx
├── .husky/
├── .next/
├── .swc/
├── node_modules/
├── public/
│   └── imágenes/
├── src/
│   ├── app/
│   │   ├── blog/
│   │   │   ├── layout.tsx
│   │   │   └── page.tsx
│   │   └── components/
│   │       ├── layout.tsx
│   │       └── page.tsx
│   └── components/
│       ├── cards/
│       │   ├── Card.tsx
│       │   └── ... (other card components)
│       └── ... (more components)
├── package.json
├── jest.config.js
├── tsconfig.json
└── ... (other configuration files)

• __tests__/: Contains all test files for Jest.
• public/: Static assets like images.
• src/app/: Next.js app directory with pages and layouts.
• src/components/: Reusable React components.
• Configuration files: Includes package.json, jest.config.js, tsconfig.json, etc.

Contributing

We welcome contributions! Please follow these steps:

1. Fork the repository

2. Create a new branch

   git checkout -b feature/YourFeature

3. Make your changes

4. Commit your changes

   git commit -m "Add YourFeature"

5. Push to your branch

   git push origin feature/YourFeature

6. Open a Pull Request

License

This project is licensed under the MIT License.

---

Note: This project is currently in development, and GitHub Actions for continuous integration and deployment are planned for future implementation.

For any questions or suggestions, please open an issue or contact the project maintainers.

---

Deployed on Vercel: Visit the live application here.

---

Made with ❤️ using Next.js, TypeScript, and Tailwind CSS.