Code Monkey home page Code Monkey logo

oxiton-foundation / click-metrics Goto Github PK

View Code? Open in Web Editor NEW
32.0 1.0 51.0 10.34 MB

Click Matrics is a powerful URL shortening and analytics platform designed to streamline the process of generating short URLs, creating QR codes, and tracking detailed analytics for each link.

Home Page: https://click-metrics.vercel.app

License: MIT License

JavaScript 6.97% HTML 0.66% CSS 10.37% TypeScript 82.00%
backend express firebase firebase-auth frontend http https mongodb react vite typescript

click-metrics's Introduction

Click Matrics

Introduction

Click Matrics is a URL shortening and analytics platform designed to streamline the process of generating short URLs, creating QR codes, and tracking detailed analytics for each link. With Click Matrics, users can easily create short URLs for their long links, share them confidently across various channels, and gain valuable insights into the performance of their links through comprehensive analytics.

Features

  • URL Shortening: Clickly shorten any long URL into a concise and shareable format.
  • QR Code Generation: Generate QR codes for each shortened URL, enabling easy offline sharing and tracking.
  • Analytics Dashboard: Gain access to detailed analytics for each shortened URL, including click-through rates, geographical distribution of clicks, referral sources, and more.
  • Customization: Customize shortened URLs with user-defined aliases for better branding and recognition.
  • Real-time Updates: View analytics data in real-time, allowing users to monitor the performance of their links as they happen.
  • Exportable Reports: Export analytics reports for further analysis or sharing with stakeholders.

Getting Started

To run locally, follow the given steps:

  1. Clone the repository
$ git clone https://github.com/oxiton-foundation/click-metrics.git
  1. Change directory
$ cd click-metrics
  1. Navigate to client folder
cd client
  1. Install npm dependencies
npm i
  1. Run
npm run dev
  1. Then go to
http://localhost:5173/

To get started with Click Matrics, follow these steps:

  1. Sign Up: Create an account on Click Matrics to access all features.
  2. Shorten URLs: Paste your long URLs into the provided field and generate short links instantly.
  3. Generate QR Codes: Download QR codes for each shortened URL to facilitate offline sharing.
  4. Track Analytics: Access the analytics dashboard to monitor the performance of your links and gain insights into audience behavior.
  5. Customize URLs: Optionally, customize shortened URLs with user-defined aliases for enhanced branding.
  6. Export Reports: Export analytics reports for further analysis or sharing.

Technologies Used

Click Matrics is built using the following technologies:

  • Frontend: React, Typescript
  • Backend: Node.js, Express.js
  • Database: MongoDB
  • QR Code Generation: QR Code Generator API

Contributing

We welcome contributions from the community! If you'd like to contribute to Click Matrics, please follow these guidelines:

  • Fork the repository and create a new branch for your feature or bug fix.
  • Go to Contributing.md to learn how to start contributing.
  • Ensure that your code adheres to our coding standards and conventions.
  • Submit a pull request detailing the changes you've made and any relevant information.

License

Click Matrics is licensed under the MIT License. See the LICENSE.md file for more information.

click-metrics's People

Contributors

swarnendu0123 avatar lazybug19 avatar stephenstolk avatar krishna-singha avatar anisharma07 avatar ramakrushnabiswal avatar gokulgsece avatar sibam-paul avatar asymtode712 avatar arpy8 avatar bhaavvya avatar rahulpoonia29 avatar tonystark-47 avatar root-0101 avatar santhosh-siddhardha avatar prime351585 avatar himanshuraimau avatar tom-blk avatar utsavladia avatar abhay-sen avatar 18venus avatar abhishek-465 avatar maheshwari-love avatar manpreetsingh18 avatar anshika14528 avatar pradnyagaitonde avatar sweta-singh28 avatar

Stargazers

 avatar Smit Khobragade avatar Narendra Dhangar  avatar Shreya Porwal avatar Asmita Mishra avatar  avatar Parijat Bhattacharjee  avatar Ira M avatar Zhazha_JiaYiZhen avatar Vaishnavi Gupta avatar Ayushmaan Agarwal avatar  avatar Chetan Jalandharia avatar  avatar Vyshnav Karun avatar  avatar Srujitha avatar  avatar Suhaina Fathima M avatar  avatar  avatar Tharak Nagaveti avatar Biswajit Dey avatar Anurag Negi avatar Atharva Rekhawar avatar  avatar  avatar Amish khan avatar VAISHNAVI AKULA avatar  avatar  avatar  avatar

Watchers

 avatar

click-metrics's Issues

GSSoC: Modify the buttons

  • As now the hover effect makes the button fade which is not great as per the perspective of the user. so, it would be better to improve the hover effect of the buttons.

Screenshot 2024-05-28 023006

Screenshot 2024-05-28 022528

GSSoC: Link home page with the logo

  • As nowadays all applications have link to the home/main page attached with the logo of their web/apps. So, it would be better to add link the home/main page with the logo

Screenshot 2024-05-28 023729

implement authentication system in the application

Need admin and user panel dashboard with their authentication as well in the application as it will help the user to get logged in first and then create their account and all and then admin having access to its all rights of seeing whole analytics as well. I am a GSSOC'24 contributor please assign me this issue as i want to work on this issue

GSSoC: Auto Commenting feature for PR Merged

This feature aims to solve the problem of inconsistent and delayed communication following the merging of PRs. By automating the commenting process, it ensures that contributors receive timely feedback and acknowledgments. It also reduces the administrative burden on maintainers, allowing them to focus more on code reviews and other critical tasks.

PR merged

[Feat]: Workflow for closing Old PRs

This feature aims to automate the management of open PRs in a repository, ensuring that outdated or abandoned PRs are closed in a timely manner. By doing so, it helps maintain repository hygiene, improves workflow efficiency, and provides a better experience for both maintainers and contributors.

Close Old PRs

[Feature]Addition of qr code generator

Python libraries can be used to generate more efficient qr codes from urls.
it will take short url as input or any other text user gives Input and qr code will be generated

GSSoC: Feature Request - Generate QR Codes for Shortened URLs

Description

I would like to request a feature to generate and download QR codes for each shortened URL within our React application. This feature will facilitate offline sharing and enhance the overall user experience.

Proposed Solution

  • Use a QR code generation library such as qrcode.react to create QR codes.
  • Integrate this functionality into the existing URL shortening flow.
  • Provide a button or link to download the QR code as an image file (e.g., PNG).

Screenshots

image


Request for Assignment

Hi @Swarnendu0123,

I would like to work on this feature as part of GSSoC. Could you please assign this issue to me?


Checklist

Thank you!

GSSoC: Need a loader in whole website

Need a loader when the components are in rendering state that increase the overall ui and ux experience of user as well. I am a gssoc'24 contributor please assign me this issue and I want to work on this issue.

GSSoC: Add Code of Conduct.md

It is important for our community to have a clear and concise code of conduct to ensure a welcoming and inclusive environment for all contributors. A Code of Conduct sets the expectation for behavior and outlines the steps for reporting and addressing unacceptable behavior. This can greatly enhance the community experience and maintain a respectful and collaborative atmosphere.
I want to add Code_of_conduct.md, please assign me this issue.

GSSoC: Setup Folder Structure and Basic Files for Backend using Node.js and Express

Description:
This issue aims to set up the initial folder structure and basic files for the backend of our project using Node.js and Express. By establishing the foundation for the backend, we can lay the groundwork for implementing key functionalities such as URL shortening, QR code generation, and analytics tracking.

Steps:

  1. Initialize the backend repository and project structure.
  2. Create necessary directories such as src, routes, controllers, models, middlewares, etc.
  3. Set up essential files including server.js, package.json, .gitignore, and any configuration files.
  4. Install required dependencies such as express, body-parser, cors, etc.
  5. Implement a basic server setup in server.js to listen for incoming requests.
  6. Configure routing for different endpoints in the routes directory.
  7. Create placeholder controller functions in the controllers directory.
  8. Set up basic error handling and middleware functions if necessary.

Assignment:
Please assign this issue to me. I will work on setting up the folder structure and basic files for the backend using Node.js and Express.

[Feat]: Auto Commenting feature for PR Raised

This feature aims to address the problem of delayed and inconsistent communication following the raising of PRs. By automatically commenting on PRs as soon as they are raised, it ensures that contributors receive immediate feedback and acknowledgment for their efforts. This fosters a positive and supportive environment for collaboration, encouraging continued participation and engagement from contributors.

PR raised

GSSoC: Adding Contribution.md

To streamline the contribution process and make it easier for new contributors to get involved, it's important to have clear and detailed contribution guidelines. A CONTRIBUTING.md file outlines the steps and best practices for contributing to the project, ensuring consistency and high-quality contributions.
Please assign me this issue

GSSoC: Designing the help page

On the Help page, we can have a form where user can write their query and emails and the admin can later respond to it. Something like the below image uploaded.
Screenshot 2024-05-28 003441
Screenshot 2024-05-28 003946

GSSoC: Modify navbar

  • It would be better if we make the navbar sticky as it is easier to navigate for the user and enhance the user experience, As on scrolling the navbar hides.

Screenshot 2024-05-28 120316

Screenshot 2024-05-28 120300

GSSoC: Auto Commenting when an Issue is Closed

This feature aims to solve the problem of poor communication and lack of acknowledgment when issues are closed. By automatically commenting on closed issues, it ensures that contributors are informed about the closure and are thanked for their efforts. This helps maintain a positive and engaging community atmosphere, encouraging continued contributions and fostering good relationships between maintainers and contributors.

issue closed

OOSI: Netlify's deployment error

Description:

If we navigate to any page rather than home page, and refresh the page:

image

We are missing some Netlify config. add the necessary config.

[Feat]: Workflow for Closing Old Issues

This feature aims to automate the process of managing old issues, ensuring that the repository remains organized and focused on relevant tasks. By automatically closing old issues, it reduces manual overhead for repository maintainers and helps keep the issue tracker tidy and up-to-date.

Close Old Iss

GSSOC: The sidebar of the Home page must have a toggle feature.

Problem:

The home page is broken in mobile devices and it is not responsive. The main problem is the sidebar. It should have a toggle feature.

Screenshot:

Screenshot_20240528_093324_Brave

Additional-context:

I would like to work on this issue. I have already gone through #24 and did the required steps.
Kindly assign me.
Contributing under GSSOC 24.

GSSoC: fix sidebar position

  • As on scrolling the sidebar also moves with the page. So, making the position of the sidebar fixed would be great
Recording.2024-05-28.153148.mp4

GSSoC: Profile button animations

click.matrics.mov

The hover effect in profile buttons animation is just a normal text-underline .. I want to add animations to it like sliding line under text on hover with a nice transition... I have gone through the steps in #24

please assign the issue to me under gssoc'24

GSSoC: Modify the style of cards

I want to modify the style of cards to enhance the overall look of the website.
Please assign me this task as I want to contribute in GSSoC.

1881122a-5db5-403d-a664-06f18762be63

Rules to contribute at Girl Script Summer of Code 2024(GSSoC) and Oxiton Open Source Internship 2024(OOSI)

Free Open Source Software for everyone

Welcome to Oxiton Foundation

At Oxiton, we believe in the power of community-driven initiatives to shape the future of technology. With a passionate team of developers, designers, and enthusiasts, we strive to create impactful solutions that are accessible to all.

Our foundation is built upon the principles of transparency, inclusivity, and collaboration. We embrace diversity in perspectives and skills, recognizing that it is the collective intelligence of our community that drives progress forward.

Through our commitment to open-source ideals, we foster an environment where ideas flow freely and barriers to entry are dismantled. Whether you're a seasoned developer or just starting out, there's a place for you here at Oxiton.

By leveraging the power of open source, we aim to democratize technology, making it more equitable and accessible for people around the globe. Through our projects, we seek to address pressing challenges, empower individuals, and drive positive change in society.

Welcome to Oxiton Foundation, where together, we code for change.

Process of claiming any issue:

  1. You need to create one issue in this repo. If you are doing it for GSSoC you need to start with GSSoC: , fi you are doing this for OSSI, start with OSSI: .
  2. Give this Repo a star on the top right corner.
  3. The Issue Should have a clear title, description, and screenshot.
  4. Sign up at https://www.oxiton.live
  5. Follow: https://github.com/oxiton-foundation
  6. Follow: https://www.linkedin.com/company/oxiton-foundation
  7. Follow: https://www.instagram.com/oxitonfoundation/
  8. Join us: https://discord.gg/DVWNcTqD
  9. Follow: https://www.facebook.com/people/Oxiton-Foundation/61559802086402/
  10. Follow: https://dev.to/oxiton_foundation
  11. Ask the maintainers to assign the issue to you, maintainers will assign the GSSoC level to your issue and assign the issue to you after validating the issue.
  12. For level 1 issues: you need to create the pull request within 2 days.
  13. For level 2 issues: you need to create the pull request within 3 days.
  14. For level 3 issues: you need to create the pull request within 4 days.
  15. For level 4 issues: you need to create the pull request within 5 days.

GSSoC: Setting up a login and signup system

  • There is no backend system for login and signup. The users can create their own account and keep track of all their works they have assessed till now.
  • A Landing page demonstrating the services offered and a route to login/signup before commencing on utilizing the products.

Tech stack: Express, Mongodb, bcrypt, Tailwind

image

I want to grab up this issue, if approved

GSSoC: Readme.md update required

Currently Our readme.md file is not looking good
assign me this issue I will create a fully new version of readme file , have created the same in many repository , I am working under gssoc

changes required are missing video of our project , allignment of text , open source section , contributors section , code of conduct, license section , animated emojis many more small updates I will create a beautiful attracting readme file .

OSSI: Making entire Page for Create New

Descriptions:
Create New button has no action as of now. I want to direct that page whenever Create New button is clicked.
image

According to me, I will add cards having buttons which will redirect to links,qr-code page,etc. Other than this please suggest me other content to add in it.

GSsoC: Shorten URLs is not working

Even if we are trying to generate the Shorten version of the URL it is not responding anything so i will fix the bug to respond in such a way that it can provide the shortest version of the URL
Screenshot 2024-05-28 115906

GSSoC: Auto Commenting Feat for Issues and PRs

This feature aims to address the problem of delayed and inconsistent communication following the creation of issues. By automatically commenting on issues and PRs as soon as they are created, it ensures that contributors receive immediate feedback and acknowledgment for their efforts. This fosters a positive and supportive environment for collaboration, encouraging continued participation and engagement from contributors.

issue creation

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.