Skip to content

Commit f637664

Browse files
sudo-arashsudo-arash
committed
The Application
1 parent 06a0871 commit f637664

File tree

8 files changed

+266
-28
lines changed

8 files changed

+266
-28
lines changed

‎README.md‎

Lines changed: 64 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,78 @@
1-
# sv
1+
# GitCalc
22

3-
Everything you need to build a Svelte project, powered by [`sv`](https://github.com/sveltejs/cli).
3+
GitCalc is a simple web application that fetches GitHub repository information through the Github's API. This project allows you to search for repositories on GitHub by specifying the owner and the repository name.
44

5-
## Creating a project
5+
## Features
66

7-
If you're seeing this, you've probably already done this step. Congrats!
7+
- Fetch GitHub repository details including:
8+
- Repository owner
9+
- Repository name
10+
- Default branch
11+
- Fork status
12+
- Watchers count
13+
- Stars count
14+
- Size (in KB)
15+
- Creation and update date
16+
- Repository description
17+
- Simple interface
18+
- Loading spinner during data fetch
19+
- Modal to display detailed repository information
820

9-
```bash
10-
# create a new project in the current directory
11-
npx sv create
21+
## Prerequisites
1222

13-
# create a new project in my-app
14-
npx sv create my-app
15-
```
23+
Before running this project, make sure you have the following installed:
1624

17-
## Developing
25+
- Node.js (with **bun**)
26+
- TypeScript
1827

19-
Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
28+
## Installation
2029

21-
```bash
22-
npm run dev
30+
1. Clone this repository to your local machine:
2331

24-
# or start the server and open the app in a new browser tab
25-
npm run dev -- --open
26-
```
32+
```bash
33+
git clone https://github.com/sudo-arash/GitCalc.git
34+
```
2735

28-
## Building
36+
2. Navigate to the project directory:
2937

30-
To create a production version of your app:
38+
```bash
39+
cd GitCalc
40+
```
3141

32-
```bash
33-
npm run build
34-
```
42+
3. Install the dependencies:
3543

36-
You can preview the production build with `npm run preview`.
44+
```bash
45+
bun install
46+
```
3747

38-
> To deploy your app, you may need to install an [adapter](https://svelte.dev/docs/kit/adapters) for your target environment.
48+
## Usage
49+
50+
1. Run the development server:
51+
52+
```bash
53+
bun dev
54+
```
55+
56+
2. Open your browser and navigate to [http://localhost:5173](http://localhost:5173) to use the GitCalc app.
57+
58+
3. Enter the repository owner and name in the provided form and click on **Fetch Info** to retrieve the repository details.
59+
60+
4. The repository information will be displayed in a modal upon successful fetch.
61+
62+
## Technologies Used
63+
64+
- **Svelte**: For building the user interface.
65+
- **Tailwind CSS**: For styling the app with utility-first classes.
66+
- **Axios**: For making HTTP requests to the GitHub API.
67+
- **Font Awesome**: For icons used throughout the app.
68+
- and the lovely **Bun**.
69+
70+
71+
## The reason behind this project
72+
73+
If you have already guessed by the name, this project was meant to calculate the size of a GitHub REPO. Because I used Github's API all the time to get the size of repos where I had planned to clone, so I decided
74+
to make something like this. This project helps me and probably you.
75+
76+
I hope you like it. If you do, please star and fork the repo to help me out with it.
77+
78+
Cheers everybody!

‎bun.lockb‎

3.15 KB
Binary file not shown.

‎package.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,5 +27,8 @@
2727
"tailwindcss": "^3.4.17",
2828
"typescript": "^5.0.0",
2929
"vite": "^5.4.11"
30+
},
31+
"dependencies": {
32+
"axios": "^1.7.9"
3033
}
3134
}

‎src/app.css‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,18 @@
11
@import 'tailwindcss/base';
22
@import 'tailwindcss/components';
33
@import 'tailwindcss/utilities';
4+
5+
.fixed {
6+
position: fixed;
7+
top: 0;
8+
left: 0;
9+
right: 0;
10+
bottom: 0;
11+
}
12+
.loader {
13+
border-width: 4px;
14+
}
15+
.fab,
16+
.fas {
17+
margin-right: 8px;
18+
}

‎src/app.html‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,10 @@
44
<meta charset="utf-8" />
55
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
66
<meta name="viewport" content="width=device-width, initial-scale=1" />
7+
<link
8+
rel="stylesheet"
9+
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css"
10+
/>
711
%sveltekit.head%
812
</head>
913
<body data-sveltekit-preload-data="hover">

‎src/lib/index.ts‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎src/routes/+layout.svelte‎

Lines changed: 32 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,4 +3,35 @@
33
let { children } = $props();
44
</script>
55

6-
{@render children()}
6+
<div class="relative flex min-h-screen items-center justify-center bg-gray-100 p-4">
7+
{@render children()}
8+
</div>
9+
10+
<div class="absolute bottom-4 left-1/2 flex -translate-x-1/2 transform space-x-4">
11+
<a
12+
href="https://github.com/sudo-arash/gitcalc"
13+
target="_blank"
14+
class="flex items-center space-x-2 rounded-lg bg-gray-800 px-4 py-2 text-white transition hover:bg-gray-700"
15+
>
16+
<i class="fab fa-github text-lg"></i>
17+
<span class="text-sm">Star on GitHub</span>
18+
</a>
19+
20+
<a
21+
href="https://github.com/sudo-arash/gitcalc/fork"
22+
target="_blank"
23+
class="flex items-center space-x-2 rounded-lg bg-gray-800 px-4 py-2 text-white transition hover:bg-gray-700"
24+
>
25+
<i class="fab fa-github text-lg"></i>
26+
<span class="text-sm">Fork on GitHub</span>
27+
</a>
28+
29+
<a
30+
href="https://github.com/sudo-arash/gitcalc/issues"
31+
target="_blank"
32+
class="flex items-center space-x-2 rounded-lg bg-gray-800 px-4 py-2 text-white transition hover:bg-gray-700"
33+
>
34+
<i class="fas fa-exclamation-circle text-lg"></i>
35+
<span class="text-sm">Report Issues</span>
36+
</a>
37+
</div>

‎src/routes/+page.svelte‎

Lines changed: 148 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,148 @@
1-
<h1>Welcome to SvelteKit</h1>
2-
<p>Visit <a href="https://svelte.dev/docs/kit">svelte.dev/docs/kit</a> to read the documentation</p>
1+
<script lang="ts">
2+
import axios from 'axios';
3+
4+
let repo = {
5+
owner: '',
6+
name: ''
7+
};
8+
let loading = false;
9+
let isRepoFetched = false;
10+
let repoData = null;
11+
let showModal = false;
12+
13+
async function handleSubmission(event: Event) {
14+
event.preventDefault();
15+
16+
if (!repo.owner || !repo.name) {
17+
alert('Please provide both the repository owner and name.');
18+
return;
19+
}
20+
21+
loading = true;
22+
isRepoFetched = false;
23+
repoData = null;
24+
25+
try {
26+
const response = await axios.get(`https://api.github.com/repos/${repo.owner}/${repo.name}`);
27+
repoData = response.data;
28+
isRepoFetched = true;
29+
showModal = true;
30+
} catch (error) {
31+
console.error('Error fetching repository:', error);
32+
alert(error.message);
33+
} finally {
34+
loading = false;
35+
}
36+
}
37+
38+
function closeModal() {
39+
showModal = false;
40+
}
41+
</script>
42+
43+
{#if loading}
44+
<div class="absolute inset-0 z-10 flex items-center justify-center bg-gray-800 bg-opacity-50">
45+
<div
46+
class="loader h-16 w-16 animate-spin rounded-full border-t-4 border-solid border-blue-500"
47+
></div>
48+
</div>
49+
{/if}
50+
51+
<div class="w-full max-w-md rounded-lg bg-white p-6 shadow-lg">
52+
<h1 class="mb-4 text-2xl font-semibold text-gray-800">GitCalc</h1>
53+
<form on:submit={handleSubmission} class="space-y-4">
54+
<div>
55+
<label class="mb-1 block text-sm font-medium text-gray-700"> Repository Owner </label>
56+
<input
57+
placeholder="GitHub repo's owner"
58+
bind:value={repo.owner}
59+
required
60+
class="w-full rounded-lg border px-4 py-2 text-gray-800 focus:outline-none focus:ring focus:ring-blue-300"
61+
/>
62+
</div>
63+
<div>
64+
<label class="mb-1 block text-sm font-medium text-gray-700"> Repository Name </label>
65+
<input
66+
placeholder="GitHub repo's name"
67+
bind:value={repo.name}
68+
required
69+
class="w-full rounded-lg border px-4 py-2 text-gray-800 focus:outline-none focus:ring focus:ring-blue-300"
70+
/>
71+
</div>
72+
<button
73+
type="submit"
74+
class="w-full rounded-lg bg-blue-500 px-4 py-2 font-medium text-white transition hover:bg-blue-600"
75+
disabled={loading}
76+
>
77+
{#if loading}Loading...{:else}Fetch Info{/if}
78+
</button>
79+
</form>
80+
</div>
81+
82+
{#if showModal && isRepoFetched && repoData}
83+
<div class="fixed inset-0 z-20 flex items-center justify-center bg-gray-800 bg-opacity-50">
84+
<div class="w-full max-w-3xl rounded-lg bg-white p-6 shadow-lg">
85+
<h2 class="mb-4 text-xl font-bold text-gray-800">Repository Information</h2>
86+
<div class="space-y-4">
87+
<div class="flex items-center space-x-2">
88+
<i class="fas fa-user text-blue-500"></i>
89+
<span class="text-gray-700"><strong>Owner:</strong> {repoData.owner.login}</span>
90+
</div>
91+
<div class="flex items-center space-x-2">
92+
<i class="fas fa-folder text-green-500"></i>
93+
<span class="text-gray-700"><strong>Repo Name:</strong> {repoData.name}</span>
94+
</div>
95+
<div class="flex items-center space-x-2">
96+
<i class="fas fa-code-branch text-purple-500"></i>
97+
<span class="text-gray-700"
98+
><strong>Default Branch:</strong> {repoData.default_branch}</span
99+
>
100+
</div>
101+
<div class="flex items-center space-x-2">
102+
<i class="fas fa-code text-blue-500"></i>
103+
<span class="text-gray-700"><strong>Fork:</strong> {repoData.fork ? 'Yes' : 'No'}</span>
104+
</div>
105+
<div class="flex items-center space-x-2">
106+
<i class="fas fa-globe text-green-500"></i>
107+
<span class="text-gray-700"
108+
><strong>URL:</strong>
109+
<a href={repoData.html_url} target="_blank" class="text-blue-500 underline"
110+
>{repoData.html_url}</a
111+
>
112+
</span>
113+
</div>
114+
<div class="flex items-center space-x-2">
115+
<i class="fas fa-calendar-alt text-yellow-500"></i>
116+
<span class="text-gray-700"
117+
><strong>Created At:</strong> {new Date(repoData.created_at).toLocaleString()}</span
118+
>
119+
</div>
120+
<div class="flex items-center space-x-2">
121+
<i class="fas fa-sync-alt text-purple-500"></i>
122+
<span class="text-gray-700"
123+
><strong>Updated At:</strong> {new Date(repoData.updated_at).toLocaleString()}</span
124+
>
125+
</div>
126+
<div class="flex items-center space-x-2">
127+
<i class="fas fa-star text-yellow-500"></i>
128+
<span class="text-gray-700"><strong>Stars:</strong> {repoData.stargazers_count}</span>
129+
</div>
130+
<div class="flex items-center space-x-2">
131+
<i class="fas fa-star text-yellow-500"></i>
132+
<span class="text-gray-700"><strong>Size:</strong> {repoData.size}kb</span>
133+
</div>
134+
<div class="flex items-center space-x-2">
135+
<i class="fas fa-eye text-blue-500"></i>
136+
<span class="text-gray-700"><strong>Watchers:</strong> {repoData.watchers_count}</span>
137+
</div>
138+
<div class="flex items-center space-x-2">
139+
<i class="fas fa-info-circle text-red-500"></i>
140+
<span class="text-gray-700"><strong>Description:</strong> {repoData.description}</span>
141+
</div>
142+
</div>
143+
<button class="mt-4 w-full rounded-lg bg-red-500 py-2 text-white" on:click={closeModal}>
144+
Close
145+
</button>
146+
</div>
147+
</div>
148+
{/if}

0 commit comments

Comments
 (0)