11 devlogs
18h 11m 26s
An Encyclopedia of Programming Languages
This project uses AI
Used ChatGPT/Gemini for debugging and very minor design help.
Shipped this project!
Codepedia (v0.4.1-beta)
Overview
Codepedia is an open-source, interactive encyclopedia designed for developers, students, and tech enthusiasts. Built with React-TS, it includes languages like Python and JavaScript to systems languages like Zig and Bash.
Backstory
I have taken a lot of inspiration from Keyboard1000n17’s OSPEDIA. I started this proj 2months ago and completing ts just now lol!
Requirements
- A modern browser with JS support,
- A keyboard and a mouse,
- Curiosity and sheer will, &
- Basic problem-solving skills
Usage: Quick Start
Pre-hosted
An instance of the ReactTS app is hosted by me through Github Pages.
You can easily access this hosted instance at codepedia.rupnil.codes!
The hosted website is compatible with most modern browsers and thus most OS.
Building from source
Idk why you would want to build from the source when i have it deployed, but here u go anyways.
Before building make sure you have the following installed:
- Node.js (Version 20 or higher)
- npm (comes with Node.js) or similar, e.g. pnpm/yarn/etc.
1. Clone the repository
git clone https://github.com/rupnil-codes/codepedia.git
cd codepedia
2. Install Dependencies
npm install
npm update
3. Run Development Server
npm run dev
or
npx vite
4. Build for Production
npm run build
Then the final compiled webapp will be in the dist/ directory.
Features:
I’ve tried adding as many features as I could, here are some:
- 30 Languages; A vast collection of languages from Bash to Zig.
- Curated Links; link directly to the best docs.
- Good visuals
Unfinished Features:
- Search bar
Project Status
Contributors
There are several well-wishers and playtesters who have helped me improve the app,
either by playtesting or providing valuable feedback. I’ve listed them in no particular order.
If i forgot to mention anyone, pls DM me on slack!
(v0.4.0-beta) About Section (067bcca)
Changelog:
- (v0.3.1-alpha) Added the Languages Data (4933d96): Added all the data for 30 languages and YES i used ai cuz theres no flipping way imma do this buy hand.
- (v0.3.2-alpha) Home Page (1dbd8b3): Redesigned the home page. This is good to go!
- (v0.4.0-beta) About Section (067bcca): Im done with the app, now its readme time babyyy!
0
Log in to leave a comment
(v0.3-alpha) Languages Page! (10a53ec)
Changelog:
- (v0.2.6-alpha) Deploy w GitHub Actions (a734cf4): I was frustrated with manually having to redeploy the site sooo here i am!
- (v0.2.6.1-alpha) Removed gh-pages (eca12aa)
- add hackclub flag (c01eddf)
- (v0.2.6.2-alpha) Hackclub Flag (0e95c50): Merge pull request #2 from SeradedStripes/main Add HackClub flag to the navbar.
- (v0.2.6.3-alpha) Meta Img Fix (a351995)
- (v0.3-alpha) Languages Page! (10a53ec): Added a sample card to store all the languages… ALSO IM BACK AFTER 2 MONTHS. ITs been like soo long. Welcome fellas. Ill complete this proj soon dw
0
Log in to leave a comment
(v0.2.5-alpha) Codepedia Design #5: Logo Revamp + Other Fixes
Changelog:
- Codepedia Design #5: Logo Revamped!
-
ab0b985: The logo is now mathematically accurate, also I tried to make the SVG more efficient but i had to revert. Removed themes page. Renamed
meta-banner.pngtobanner.png.
Next Steps:
- Navbar: Functionality
- Main Homepage
- Add Language Pages
- Fix routing from HashRouter to Browser Router
Notes:
Uhh from today updates may get fewer and more distant cuz of exams yk :(. Also imma complete the excavation game soon.
0
Log in to leave a comment
(v0.2.2-alpha -> v0.2.4-alpha) Deployemnt and Routing Fixes
Changelog:
- ab0b985: Couldn’t fix a typo in a file name so decided to delete and remake the file; Deleted NavBar.tsx
- 93478db: Added Navbar.tsx
-
8b29ced: Soo previously I was using
BrowserRouterwhich was working but when going directly to the route (e.g. /about) it failed to load the page. So for now TEMP I’m usingHashRouterwhich changes pages to/#/(page). e.g./aboutto/#/about. ALSO added TODO list in the README.md
Next Steps:
- Navbar Completion: Functionality
- Main Homepage
- Add Language Pages
- Fix routing from HashRouter to Browser Router
Notes:
I hope you are having a nice and fruitful dayy!
2
Log in to leave a comment
Comments
I’M NOT listening to the backend allegations
What are the backend allegations? Should’ve made it with kuusi :P (lets ignore the fact that kuusi is still in early development)
(v0.2.1-alpha) Nav Fixes + Routing (Removed Sidebar)
Changelog
-
65e9bb7: Removed the sidebar which was hogging the available space. Fixed the navbar Issue #1 and added seamless routing using
react-routerandreact-router-dom. Also added was meta tags that now embed the name and logo of codepedia (Img 2).
Next Steps:
- Main Homepage body
- Actually, add a language page.
Notes:
If you actually notice i have changed the logo instead of being a rectangle its now actually a squircle! so YAY
3
Log in to leave a comment
Comments
cool
Wowwww so tufff!
anything to avoid the backend
Navbar + Sidebar Update: Theme Revamped!
Revamped the UI of the Navbar and added the structure of the Sidebar! I’m pretty happy how it turned out. Here are some technical details for my nerds:
Changelog
- (v0.2.0-alpha) Better Nav, Sidebar + Catppuccin Theme!
- (v0.1.1-alpha) NavBar Bug Fixes
- (v0.1.0-alpha) NavBar Creation
Next Steps:
- Sidebar Completion
- Main Homepage Body
3
Log in to leave a comment
Comments
nice bro!
thanks!
how do you make this designs?
(v0.1.0-alpha -> v0.1.1-alpha) + Codepedia Design #4
NavBar Development & Bug Fixes!
So, this was a productive session!
DEMO URL: https://rupnil-codes.github.io/codepedia/
I just added & designed some of the logos and banner. BUT the maximum productivity was made in WebApp Development!
I made this navbar component in REACT + VITE + TS and I am pretty proud of this!!
Next Steps:
- [] Sidebar (Code)
- [] Programming Language Pages (Design)
2
Log in to leave a comment
Comments
Oh hey! I saw the logo in the flavortown slack! Very awesome :D
thankss!!!
Codepedia Design #3!!
So as you can clearly see, I cooked up this beautiful sleek UI which is infact incomplete T-T.
Its , i kid you not, 12 am and I am extremely sleepyyy.
So drop your suggestions and I’ll check them out tmrw!
Thanks Y’all!!
0
Log in to leave a comment
Codepedia Design #2!
Very productive session! Cooked up this beautiful logo and banner!
Thought the banner is not the final one, Im still happy how it turned out!
Unlike yesterday tho I had a clear idea for the logo as I had been doodling the whole day at School LMAO.
Anyways I think Imma design a landing page for the site and then start coding!
Thanks Y’all!
0
Log in to leave a comment
Codepedia Design #1!
Nothing too fancy to boast about
But uhh i “attempted” to design but had no good ideas also I have set up the Github Pages for demo!!
Deployed react+vite app from github!
2
Log in to leave a comment
Comments
you could add mine to it lol, cool project bro
Thanks! almartdev
I will def add if u send ur project in my dm
