Shorten URL Frontend

An URL Shortener that transform long, ugly links into nice, short URLs.

Here is the website and this is the backend

Table of Contents

• Shorten URL Frontend
  • Table of Contents
  • Team members
  • Manual Installation
  • Screenshots
  • Technologies Used
  • Environment Variables
  • Project Structure
  • Linting
  • Contributing
  • License
  • Contact

Team members

• Trần Hải Đăng: Front-end, UI/UX Designer
• Trịnh Khánh Linh: Back-end
• Nguyễn Trọng Nghĩa: Project Manager
• Nguyễn Nhật Huy: Project Owner

Manual Installation

If you would still prefer to do the installation manually, follow these steps:

Clone the repo:

git clone https://github.com/hdang09/Shorten-URL-Frontend.git
cd Shorten-URL-Frontend

Install the dependencies:

yarn

Set the environment variables:

cp .env.example .env

# open .env and modify the environment variables

Screenshots

Landing page Home page My URL page Statistics page Settings page Dark mode

Technologies Used

• QR Code Generator: with QR Code Styling
• Dependency management: with Yarn
• Linting: with ESLint and Prettier
• Theme: using Ant Design and Chakra UI
• Skelton: using react-loading-skeleton
• Styling: with Styled Components
• Tooltip: using TippyJS

Environment Variables

The environment variables can be found and modified in the .env file. They come with these default values:

# Your API Base URL
VITE_API_URL=[API_URL]

Project Structure

src\
 |--app\            # Redux
 |--assets\         # Assets releted to the project
 |--components\     # Reused components
 |--config\         # Environment variables and configuration related things
 |--hooks\          # Custom hooks
 |--layouts\        # My layout
 |--pages\          # Routes to each page
 |--routes\         # Routes
 |--utils\          # Utility classes and functions
 |--app.jsx
 |--main.jsx

Linting

Linting is done using ESLint and Prettier.

To modify the ESLint configuration, update the .eslintrc.json file. To modify the Prettier configuration, update the .prettierrc.json file.

To prevent a certain file or directory from being linted, add it to .eslintignore and .prettierignore.

To maintain a consistent coding style across different IDEs, the project contains .editorconfig

Contributing

Contributions are more than welcome! Please check out the contributing guide.

License

MIT

Contact