{"id":21307811,"url":"https://github.com/jdegand/chakra-conf","last_synced_at":"2026-05-09T01:37:32.410Z","repository":{"id":110668564,"uuid":"460607110","full_name":"jdegand/chakra-conf","owner":"jdegand","description":"50 React Projects for the Static Web Project Idea - React Conference","archived":false,"fork":false,"pushed_at":"2022-02-18T18:37:07.000Z","size":4402,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-15T20:13:24.128Z","etag":null,"topics":["chakra-ui","leaflet","react","react-leaflet","react-router"],"latest_commit_sha":null,"homepage":"https://jdegand.github.io/chakra-conf/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jdegand.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-02-17T21:02:58.000Z","updated_at":"2023-04-03T20:55:40.000Z","dependencies_parsed_at":null,"dependency_job_id":"0e2b2841-2b71-4609-ac22-b64ac6ca671f","html_url":"https://github.com/jdegand/chakra-conf","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/jdegand/chakra-conf","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jdegand%2Fchakra-conf","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jdegand%2Fchakra-conf/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jdegand%2Fchakra-conf/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jdegand%2Fchakra-conf/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jdegand","download_url":"https://codeload.github.com/jdegand/chakra-conf/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jdegand%2Fchakra-conf/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32804319,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-08T08:22:46.396Z","status":"ssl_error","status_checked_at":"2026-05-08T08:22:45.650Z","response_time":54,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["chakra-ui","leaflet","react","react-leaflet","react-router"],"created_at":"2024-11-21T16:34:28.904Z","updated_at":"2026-05-09T01:37:32.383Z","avatar_url":"https://github.com/jdegand.png","language":"JavaScript","funding_links":["https://opencollective.com/chakra-ui/expenses/50382"],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003eReact Conference Schedule\u003c/h1\u003e\n\n\u003cdiv align=\"center\"\u003e\n   Solution to a challenge from \u003ca href=\"https://50reactprojects.com/\" target=\"_blank\"\u003e50 react projects for the static web\u003c/a\u003e.\n\u003c/div\u003e\n\n## Table of Contents\n\n- [Overview](#overview)\n  - [Built With](#built-with)\n  - [Thoughts](#thoughts)\n- [Requirements](#requirements)\n- [Improvements](#improvements)\n- [Useful Resources](#useful-resources)\n\n## Overview\n\n[Live Link](https://jdegand.github.io/chakra-conf)\n\n![](chakra-conf-homepage.png)\n![](chakra-conf-speakers.png)\n![](chakra-conf-schedule.png)\n![](chakra-conf-venue.png)\n![](chakra-conf-sponsors.png)\n![](chakra-conf-conduct.png)\n![](chakra-conf-homepage-mobile.png)\n![](chakra-conf-reserve-form.png)\n![](chakra-conf-confirmation.png)\n\n### Built With\n\n- React\n- React Router \n- randomuser.me api\n- Leaflet \u0026 React-Leaflet\n\n### Thoughts\n\n- Originally, wanted to use a different library for each route and have those libraries be the sponsors of the fake conference.\n\n- No real standout React table libraries.  \n\n- Wanted to do a Gantt chart like the ember conference page but hard to find good examples \n- The ember site did not use D3 etc and used css alone to make its chart\n- Seemed like a timesink til I explored alternatives and found no easy paste and customize solution\n\n- To use D3 and React, best solution seems to be use D3 to make the chart inside a useEffect and return a svg with a ref to that chart \n\n- I had abandoned a project that integrated D3 and React before - With hooks, it is slightly easier but still documentation and examples are scarce beyond basic chart types\n\n- Chakra \u0026 React Router issues with Link - to use both - have to alias one - Or not supposed to use both? \n- Chakra Docs show using \"as\" prop to get functionality \n  - import Link as RouterLink from 'react-router-dom'\n  - Link as={RouterLink}\n- Have to explore Chakra and React Router problems / tips \n\n- Will be looking into Strapi more even though I will not convert this to use a CMS\n\n## Requirements\n\n- [x] Create a multi-page website that includes all of the basic information about the new conference.\n- [ ] Add a list of speakers to the homepage and create a schedule that lists each speaker with a talk and time.\n- [ ] Set up a CMS and source the content of the website with that system.\n\n## Improvements\n\n- Performance\n- Local Storage to save speakers\n- Customize the theme\n- Use google maps instead of Leaflet - Chakra docs has an example\n- Skip to main content link - does Chakra provide ? \n- Improve Form and look into Chakra forms and validation\n \n### Useful Resources\n\n- [Random User API](https://randomuser.me/) \n- [Conf Code of Conduct](https://confcodeofconduct.com/)\n- [Ember Conf](https://2019.emberconf.com/schedule.html) - 2019 ember conference\n- [LatLong](https://www.latlong.net/) - Latitude and Longitude Finder\n- [Blog](https://blog.bitsrc.io/top-5-react-table-libraries-170505f75da7) - react table libraries\n- [Blog](https://blog.logrocket.com/the-top-react-table-libraries-to-use-in-2021/) - react table libraries\n- [Retool](https://retool.com/blog/building-a-react-table-component/) - React Table tutorial\n- [Github](https://github.com/SergeyDragunov/react-scheduler-table) - React Scheduler Table\n- [Stack Overflow](https://stackoverflow.com/questions/56002784/any-example-for-gantt-chart-using-d3-js-in-react-js-either-with-d3-js-or-react-j) - D3 Gantt\n- [Authentise](https://www.authentise.com/post/gantt-chart-with-react-js-and-d3-js) - Gantt \n- [Github](https://github.com/pigment/fake-logos) - Fake Logos\n- [Blog](https://blog.logrocket.com/react-leaflet-tutorial/) - React leaflet tutorial\n- [Stack Overflow](https://stackoverflow.com/questions/18589621/setting-map-language-to-english-in-openstreetmap-with-leafletjs) - Leaflet js \u0026 local language \n- [Open Collective](https://opencollective.com/chakra-ui/expenses/50382) - Chakra UI expenses for a meetup\n- [Open Street Map](https://openstreetmap.be/en/projects/howto/leaflet.html) - Leaflet w/ markers\n- [Wanago](https://wanago.io/2021/04/19/hashrouter-browserrouter-react/) - hashrouter vs browserrouter\n- [Stack Overflow](https://stackoverflow.com/questions/70437952/is-there-a-way-to-set-a-default-route-with-react-router-v6) - default route \n- [Blog](https://blog.griddynamics.com/using-d3-js-with-react-js-an-8-step-comprehensive-manual/) - d3 with react\n- [Bl.ocks](http://bl.ocks.org/dk8996/5449641) - gantt\n- [Medium](https://medium.com/@jeffbutsch/using-d3-in-react-with-hooks-4a6c61f1d102) - D3 with hooks\n- [GitConnected](https://levelup.gitconnected.com/react-hooks-and-d3-39be1d900fb) - D3 and hooks\n- [YouTube](https://www.youtube.com/watch?v=9uEmNgHzPhQ) - D3 and React\n- [Stack Overflow](https://stackoverflow.com/questions/56002784/any-example-for-gantt-chart-using-d3-js-in-react-js-either-with-d3-js-or-react-j) - gantt chart D3 or react \n- [Github](https://github.com/SergeyDragunov/react-scheduler-table) - React Scheduler Table\n- [Blog](https://raptis.wtf/blog/create-a-navbar-with-chakra-ui-react/) - Navbar Chakra\n- [Medium](https://benjamincarlson.medium.com/create-a-hamburger-menu-using-chakra-ui-a-practical-example-of-javascripts-usestate-fb087e100b22) - hamburger \u0026 chakra\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjdegand%2Fchakra-conf","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjdegand%2Fchakra-conf","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjdegand%2Fchakra-conf/lists"}