InstaGit by Reactless Team

Description

Instagram for GitHub users to share profiles access repos and sign up.

Table of Contents

• InstaGit by Reactless Team
  • Description
  • Table of Contents
  • Website Preview
  • Features
  • Installation
    • Option 1 - Download
    • Option 2 - Clone project
  • Usage
    • Start the application
  • Technologies
  • Tools and extensions
    • Visual Studio Code
    • VS Code Counter
    • JSDoc 4.0.2
    • Prettier 3.2.5
  • Project Requirements
  • Statistics
    • Languages
    • Directories
  • Contributing
  • License
  • Contact

Website Preview

Here's a look at the InstaGit web application.

Home page:

• with Anime.js library in banner area;
• with fetch the GitHub API in Cards for showing REPO and user info

Contact page:

• with the subscription form and store in local server;

Features

• Easy to search and share the GitHub repositories

• Fetch the GitHub API for showing the REPO

• Simple and works in your browser.

• Your data stays on your device, ensuring your privacy and security.

Installation

Option 1 - Download

Download the project from GitHub repository on your local machine.

1. Open GitHub repository. (link to repository)

2. Select Code from top navigation section. (reference on the image below) 👇

   

3. Select <> Code dropdown button from sub section. (reference on the image below) 👇

   

4. Select Download ZIP from dropdown menu to download project in .zip format. (reference on the image below) 👇

   

5. Unzip the project.

   [!TIP] You can use 7-Zip if you don't have file archiver. 7-Zip is free software with open source. The most of the code is under the GNU LGPL license. Some parts of the code are under the BSD 3-clause License. Also there is unRAR license restriction for some parts of the code. Read 7-Zip License information. Download the application from official website.

6. Open project with VS Code or other IDE.

Option 2 - Clone project

1. On GitHub.com, navigate to the main page of the repository. (link to repository).

2. Above the list of files, click Code. (reference on the image below) 👇

   

3. Copy the URL for the repository.

• To clone the repository using HTTPS, under "HTTPS", click

• To clone the repository using an SSH key, including a certificate issued by your organization's SSH certificate authority, click SSH, then click

• To clone a repository using GitHub CLI, click GitHub CLI, then click (reference on the image below) 👇

  

1. Open Git Bash.

2. Change the current working directory to the location where you want the cloned directory.

3. Type git clone, and then paste the URL you copied earlier.

   git clone https://github.com/DonielM/team-reactless-instagit.git
   

4. Press Enter to create your local clone.

   $ git clone https://github.com/DonielM/team-reactless-instagit.git
   > Cloning into `Spoon-Knife`...
   > remote: Counting objects: 10, done.
   > remote: Compressing objects: 100% (8/8), done.
   > remove: Total 10 (delta 1), reused 10 (delta 1)
   > Unpacking objects: 100% (10/10), done.
   

Usage

Start the application

To start the application, run the following command in your terminal:

npm start

Technologies

• Node.js v21.6.1
• HTML
• Bootstrap
• CSS
• JavaScript
• Prettier v3.2.5
• Git
• JSDoc v4.0.2
• React JS
• Anima.js

Tools and extensions

Visual Studio Code

Visual Studio Code is a lightweight but powerful source code editor which runs on your desktop and is available for Windows, macOS and Linux. It comes with built-in support for JavaScript, TypeScript and Node.js and has a rich ecosystem of extensions for other languages and runtime (such as C++, C#, Java, Python, PHP, Go, .NET).

VS Code Counter

VS Code extension counts blank lines, comment lines, and physical lines of source code in many programming languages. This extension uses other language extensions to determine the line of code. Therefore, you may need to install the language extension to support a new language. Conversely, as the number of language extensions increases, the range of support for this feature also increases.

JSDoc 4.0.2

JSDoc 3 is an API documentation generator for JavaScript, similar to Javadoc. You add documentation comments directly to your source code, right alongside the code itself. The JSDoc tool will scan your source code and generate an HTML documentation website for you.

JSDoc's purpose is to document the API of your JavaScript application or library. It is assumed that you will want to document things like modules, namespaces, classes, methods, method parameters, and so on.

Prettier 3.2.5

Prettier is an opinionated code formatter with support for:

• JavaScript (including experimental features)
• JSX
• Angular
• Vue
• Flow
• TypeScript
• CSS, Less, and SCSS
• HTML
• Ember/Handlebars
• JSON
• GraphQL
• Markdown, including GFM and MDX v1
• YAML

It removes all original styling* and ensures that all outputted code conforms to a consistent style. (See this blog post)

Prettier takes your code and reprints it from scratch by taking the line length into account.

Project Requirements

To ensure a dynamic and responsive user experience:

• Bootstrap for responsive design and components.
• fetch for dynamic content loading and API interactions.
• GitHub API for searching and showing the user info and Git repositories.
• Using ReactJs - like useState, useEffect, props etc...
• deployed in Netlify
• Mobile responsiveness to ensure accessibility on all devices.

Statistics

Languages

language	files	code	comment	blank	total
JSON	3	7,507	0	3	7,510
JavaScript JSX	14	755	23	90	868
CSS	13	513	6	102	621
Markdown	1	101	0	53	154
JavaScript	2	26	1	3	30
HTML	1	14	1	3	18
SVG	2	2	0	0	2

Directories

path	files	code	comment	blank	total
.	36	8,918	31	254	9,203
. (Files)	6	7,476	2	61	7,539
public	1	1	0	0	1
src	29	1,441	29	193	1,663
src (Files)	2	29	0	5	34
src\assets	1	1	0	0	1
src\components	17	921	19	131	1,071
src\components\contactForm	2	148	0	25	173
src\components\footer	2	93	0	15	108
src\components\gitHubCard	1	19	0	5	24
src\components\header	2	90	0	15	105
src\components\post	2	89	4	15	108
src\components\searchBtn	2	117	3	19	139
src\components\sideNav	2	110	0	12	122
src\components\timeline	2	78	4	9	91
src\components\userCard	2	177	8	16	201
src\data	1	172	0	1	173
src\pages	6	233	10	37	280
src\pages\contact	2	42	0	7	49
src\pages\home	2	159	6	24	189
src\pages\homePage	2	32	4	6	42
src\styles	2	85	0	19	104

Contributing

If you'd like to contribute to this project, please follow the guidelines outlined in the CONTRIBUTING.md file.

License

Copyright (c) 2024 DonielM

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

Contact

Reactless Team

• Project Link
• Presentation