/URLShortener

URL Shortener Deployed Link 👇🏻

Primary LanguageTypeScript

URL Shortener App

⚡ About Us:

This project is a URL Shortener application that allows users to enter a long URL, which is then shortened to a much shorter URL that can be easily shared. The shortened URL is redirectable to the original long URL.

⚡Tech Stack:


Tailwind CSS TypeScript Node.js Express Next.js mongoDB

⚡Table of Contents:

Features

  1. URL shortening: Users can enter a long URL and get a shortened URL that can be easily shared.
  2. Redirects: The shortened URL redirects to the original long URL.

Technologies

The project utilizes the following technologies:

  • Backend:

    • NodeJS: A JavaScript runtime for building server-side applications.
    • ExpressJS: A lightweight framework for building web applications.
    • MongoDB: A document-oriented NoSQL database.
  • Frontend:

    • Next.js: A React framework for building server-side rendered and statically generated web applications.
    • TypeScript: TypeScript is used throughout the project to ensure strong type safety and enhance the development process.
    • Tailwind CSS: Tailwind CSS is used for styling the frontend, offering a utility-first approach and speeding up the design process.

Application Setup

To setup the application locally, follow these steps:

  1. Star and Fork this repo to create your own copy to work from.

  2. Clone the repository you forked to your local machine using:

       git clone <your_forked_repo_url>
  3. Navigate to the Server directory using command "cd server" and create a .env file and copy contents of .env.example file to .env file and add all secret keys to setup MongoDB database.

  4. Install dependencies in server directory of project:

       npm install
  5. Start the server using command:

       npm start
  6. Now Navigate to the client directory using command "cd client" and create a .env.local file and copy contents of .env.sample file to .env.local file and add server URL.

  7. Install dependencies in client directory of project:

       npm install
  8. Start the application using command:

       npm start
  9. Open http://localhost:3000 in your browser to see the application.


Run application using script:

  1. Run mongodb database locally if not running, Open Git Bash in root directory of your project where Setup.sh file is present and run the below command:

       ./script.sh
  2. This will setup the frontend application and database, finally start the server using below command:

       cd server
       npm start

How to Contribute

Contributions are welcome! If you would like to contribute to the project, please follow these steps:

  1. Clone and setup this application locally by following above application setup steps.

  2. Create a new branch for the issue you assigned to work on, using below command:

       git checkout -b your_branch_name
  3. Make your changes to the code.

  4. Once you are satisfied with your changes, commit them with a descriptive commit message using below command:

       git add .
       git commit -m "feat: Add feature X"
  5. Push your changes to your forked repository:

       git push origin your_branch_name
  6. Create a pull request by clicking the "Pull request" button on the original repository page.

  7. Wait for the project maintainer to review your pull request and provide feedback.

  8. If your pull request is accepted, it will be merged into the main branch of the project. Congratulations, you've contributed to the project!


Usage

To use the app, follow these steps:

  1. Enter a long URL in the input field and click the "Shorten" button.
  2. Copy the shortened URL and share it with others.

⚡Contribution Guidelines:

  • Checkout and make your changes for the develop branch only: When working on your contributions, switch to the develop branch in your local repository. This ensures that you are working on the latest version of the codebase.

  • Create pull requests only for the develop branch: When you are ready to submit your changes, create a pull request (PR) targeting the develop branch. This allows the maintainers to review and merge your code into the main development branch.

  • Maintain contribution guidelines: Each project may have its specific contribution guidelines. It's important to familiarize yourself with these guidelines before submitting your contributions. Adhering to these guidelines ensures consistency and helps maintain the quality of the codebase.

  • Format your commit message with the issue number: When making commits related to an issue, follow the format Fixes: #10 in your commit message. Replace 10 with the issue number you are addressing. This helps track and manage issues more efficiently.

  • Attach a Postman response screenshot for backend tasks: For tasks related to the backend, it is recommended to include a screenshot of the Postman response along with your pull request. This provides additional context and helps reviewers understand the changes made and their impact on the backend functionality.

  • Make your pull request descriptive and include examples: When creating a pull request, provide a clear and descriptive explanation of the changes you made. This helps reviewers understand the purpose and significance of your contribution. Additionally, including at least one example that demonstrates the intended usage or effect of your changes can be beneficial.

  • Rebase your commits and optimize file changes: When submitting your pull request, consider rebasing your commits into one commit and optimizing your file changes. This helps keep the commit history clean and makes it easier for reviewers to understand your changes.

Remember, following these guidelines will help ensure a smooth and efficient contribution process. Happy coding!


⚡ Featured In:

Open Source Programs

Event Logo Event Name Event Description
GSSoC 24 GirlScript Summer of Code 2024 GirlScript Summer of Code is a three-month-long Open Source Program conducted every summer by GirlScript Foundation. It is an initiative to bring more beginners to Open-Source Software Development.

Code of Conduct:

Please note that this project is released with a Contributor Code of Conduct. By participating in this project you agree to abide by its terms.


License:

License
This project is licensed under the MIT License.


Don't forget to leave a star for this project!

Go to Top