Skip to content
Mireli5656Public

About

No description or website provided.

Topics

Resources

Stars

1 star

Watchers

0 watching

Forks

Latest commit

 

History

8 Commits

Folders and files

NameName
Last commit message
Last commit date
 
 
 
 
 
 
 
 
 
 

Repository files navigation

DevPulse

A developer trend radar. Track trending open-source GitHub repositories and popular Dev.to articles by programming language and timeframe, all in one dashboard.

HTML5

CSS3

JavaScript

No build tools

GitHub Pages

Live demo: https://mireli5656.github.io/DevPulse/

Features

  • Two sources in one view. Repositories from the GitHub Search API and top articles from the Dev.to API.
  • Language filter. JavaScript, TypeScript, Python, Rust, Go, C++, PHP, Java, and Kotlin.
  • Timeframe toggle. Weekly (7 days) or monthly (30 days).
  • View tabs. All, GitHub Repos, Dev.to Articles, and Saved Bookmarks, each with a live count.
  • Instant filtering. Search by title, description, or author without another network request.
  • Bookmarks. Star any repo or article. Saved items persist in your browser, stay available when you switch language or timeframe, and sync across open browser tabs.
  • One-click clone. Copy the HTTPS clone URL of any repo with a single click.
  • Smart caching. Responses are cached in LocalStorage for 15 minutes to protect API rate limits.
  • Resilient loading. Requests time out after 12 seconds, and if one source fails the other still renders.
  • Polished UI. Dark glassmorphism layout, skeleton loading states, empty states, and a responsive grid for mobile, tablet, and desktop.
  • Keyboard friendly. Press / to focus search, Esc to clear it, and use the left and right arrow keys to move between tabs.

Tech stack

Area Choice
Markup HTML5
Styling Tailwind CSS (CDN) plus custom CSS in styles.css
Icons Font Awesome 6 (CDN)
Font Bricolage Grotesque (Google Fonts)
Logic ES6+ Vanilla JavaScript, no framework, no bundler
Hosting GitHub Pages (static files only)

Project structure

devpulse/
├── index.html   # Layout, CDN imports, and container elements
├── styles.css   # Glassmorphism cards, skeletons, animations
├── app.js       # State, API calls, caching, bookmarks, rendering, events
└── README.md

Getting started

There is nothing to install or build.

git clone https://github.com/Mireli5656/devpulse.git
cd devpulse

Then either open index.html directly in your browser, or serve the folder locally:

# Python
python -m http.server 8000

# Node
npx serve .

Visit http://localhost:8000.

Deploy to GitHub Pages

  1. Push the files to the root of your repository.
  2. Open Settings → Pages.
  3. Under Build and deployment, set Source to Deploy from a branch.
  4. Choose the main branch and the / (root) folder, then save.
  5. After a minute, your site is live at https://<your-username>.github.io/<repo-name>/.

How it works

Data sources

Source Endpoint Query
GitHub GET /search/repositories language:<lang> created:>YYYY-MM-DD, sorted by stars, descending
Dev.to GET /api/articles tag=<lang>&top=<days>

Both requests run in parallel. If one fails, the other still renders and a warning banner explains what went wrong.

Caching

  • Key format: devpulse_cache_${language}_${timeframe}
  • Time to live: 15 minutes
  • A valid cache entry loads instantly with no API calls.
  • Failed requests are never cached, so a temporary error does not block you.
  • The Refresh button bypasses the cache and fetches fresh data.

Bookmarks

Bookmarks are stored under devpulse_bookmarks in LocalStorage. Each entry keeps the full card data, so it renders correctly even after the original results are gone from the current view. Your last language and timeframe are remembered under devpulse_prefs.

Rate limits

The GitHub Search API allows roughly 10 unauthenticated requests per minute per IP. The 15-minute cache keeps normal use well below that. If you hit the limit, DevPulse shows when it resets and you can try again shortly. The Dev.to API needs no key for these endpoints.

Customization

Add a language. Open app.js and add an entry to the LANGS object. The first value is the GitHub language qualifier and the second is the Dev.to tag:

const LANGS = {
  // ...
  Swift: ['swift', 'swift'],
};

Change the cache duration. Edit the TTL constant at the top of app.js (value in milliseconds).

Change colors. Edit the CSS variables at the top of styles.css (--violet, --cyan, --amber).

Browser support

Any modern evergreen browser (Chrome, Edge, Firefox, Safari). LocalStorage must be enabled for caching and bookmarks. If it is blocked, the app still works but does not persist data.

Contributing

Issues and pull requests are welcome. Please keep the project free of build tools so it stays deployable straight from the repository root.

License

Released under the MIT License. Add a LICENSE file to your repository to match.

Credits

Data provided by the GitHub REST API and the Dev.to API. Icons by Font Awesome. Styling with Tailwind CSS.

About

No description or website provided.

Topics

Resources

Stars

1 star

Watchers

0 watching

Forks

Releases

Packages

Contributors

Languages