Summer Of Making Project Search
Allows searching for projects inside the Hackclub Summer Of Making Program
Submission to Summer of Making and Reactive
# /backend
Contains the backend structure that is used to download and update the project list
# /frontend
Contains a frontend react+nextjs interface that allows the searching
# Uses:
The SOM API
React + NextJS
My Brain
Ras_rap
Check their projects out: Kraken event, Kraken event, Ras Games, Universal Configuration Language, Minecraft Magic, Portfolio, OpenPlace, SD Tools, Private Equity Marker
sky
Whoops! Looks like they don't have a project yet. Maybe ask them to start one?
Aly
Check their projects out: Captain Redbeard's Adventure, Aly's Personal Website
fily
Check their projects out: (title pending), GNUrdle, MKSync, bnuuy
Once you ship this you can't edit the description of the project, but you'll be able to add more devlogs and re-ship it as you add new features!
Updated all the data, working to add compatibility for the API changes in summer, but currently paused due to me being forbidden from the API 💀
Refetched the overall stats, and added a /api/leaderboard endpoint
Just refetched the user count, and implemented the live.alimad.xyz API!
There has been a drop in hackclub slack users :(
Alright, so latest update, I added more graphs to the API and UI, and added a stats metadata feature.
Starting with backend, we fetch the project list from the SOM API, we fetch the list of all
hackclub slack users, and we incorporate all users names into the project list
This will allow searching by author name
Creating getbanners.js, that uses the pages browse endpoint to fetch all project banners
-- Didnt sleep between here --
Created index.js to get all users, get banner images, and merge them with projects.json, to create, the one, the legendary, FINALPROJECTS.JSON !!!!!!!!!!!!
End of Backend ig
Created frontend setup
Created frontend page, search page
At night:
Created the entire search algorithm (implemented from Alimad Surviellance)
The search engine basically has a goal to give the most relevant project.
This is done by assigning a score to each project, and then sorting by that score.
A project has many properties like name, author name, id, etc.
And it also has a bunch of low priority things like description, region, etc.
Alimad Search Engine merges all of them into an index, divides each index key by splitting with " ".
Then it splits the query with " ", and then filters all arrays for duplicates.
Next, a two dimensional loop compares each query word with each index word according to the following:
> If the query word is equal to the index word: add a score of 25
> If the query word is contained in the index word: add a score of 20
> If the levenshtein distance between the query word and the index word is less than 3: add a score of 10
> Repeat for low priority index with half the scores, but dont compare levenshtein distances
Then an approximate median is calculated by averaging the max and min value, adding them to the min value,
and then by filtering any projects below the mid value.
Then the projects are sorted using quick sort, and viola! We have our results.
This algorithm was designed by me three months ago.
Did some finishes, added stats page, improved UI, and followed all the requirements for Reactive:
[x] Make at least three pages that link to each other (/, /search and /about)
[x] Make a nested route (/api/project/[id])
[x] Use at least 5 components (about-content, containter, loading, projectCard, searchContent, stats, dropdown)
[x] One of those components should accept children (container)
[x] One of those components should accept props (projectCard, stats)
[x] Have a nested component (/about has nested s)
[x] Create a component that fetches and displays data from an API (/about fetches from /api/stats)
And with that, I call this project finished, with just some things left to do:
[x] Create a sort by field
Open Source. Alimad Corporations. All rights reserved.
Made by Muhammad Ali
Downloaded list of banner image urls, downloaded hackclub slack users list, downloaded project json and merged all into
ONE BIG DADDY JSON to search from
and created an endpoint to get a single project details
Will do the entire frontend tomorrow :)
Starting with backend, we fetch the project list from the SOM API, we fetch the list of all hackclub slack users, and we incorporate all users names into the project list
This will allow searching by author name
Creating getbanners.json, that uses the pages browse endpoint to fetch all project banners