|
| 1 | +--- |
| 2 | +title: Build the Ultimate University Map |
| 3 | +image: /assets/img/default-banner.jpg |
| 4 | +author: jack |
| 5 | +date: 2024-03-03 20:55:00 +0800 |
| 6 | +categories: [reactJS] |
| 7 | +tags: [reactJS, leaflet] |
| 8 | +math: false |
| 9 | +pin: false |
| 10 | +--- |
| 11 | + |
| 12 | +Hey there, fellow developers and map enthusiasts! Welcome to the Dev Blog for [University Map](https://university-map.github.io), where we're crafting the ultimate university map experience. If you're passionate about maps, user interfaces, and making information accessible, you're in the right place. Let's dive into what Project Uni is all about and how you can get involved. |
| 13 | + |
| 14 | +## What is University Map? |
| 15 | + |
| 16 | +University Map is a side project dedicated to creating a comprehensive map of universities around the world. Our goal is to make it easy for students, researchers, and anyone curious about higher education to explore universities, their locations, and key information about them. Whether you're planning your next academic journey or simply exploring the vast world of education, this project has you covered. |
| 17 | + |
| 18 | +## Feature Highlights |
| 19 | +- Comprehensive University Profiles |
| 20 | +- Search Functionality |
| 21 | +- Internationalization |
| 22 | + |
| 23 | +## Tech Stack |
| 24 | +- ReactJs |
| 25 | +- Mantine |
| 26 | +- Leaflet + OpenStreetMap |
| 27 | + |
| 28 | +## The Journey |
| 29 | + |
| 30 | +Firstly, I've only worked with Vue.js in my professional experience. However, during my research, I noticed that most articles related to Leaflet use React.js. I believe using React.js might make problem-solving easier. When I visited the React.js official website, they suggested using frameworks like Next.js or Remix. After watching this easy-to-follow [tutorial](https://www.youtube.com/watch?v=JBTKlcUJXQ4), I successfully initialized a map and marked National Cheng Kung University on it. Here's the corresponding commit: [5cfad27](https://github.com/university-map/university-map-nextjs/tree/5cfad278f3fc1174973dcdee9a2ca37258f9266e). |
| 31 | + |
| 32 | + |
| 33 | + |
| 34 | +Next, I incorporated Ant Design to create a fixed information panel on the left side. This panel is used to display university banners and information. I chose Ant Design as my UI framework for its robust documentation and easiness. With the university data described in YAML format, I can now dynamically populate the information panel with the university's information: |
| 35 | + |
| 36 | +```yaml |
| 37 | +# /public/universities/Taiwan/National Taiwan University/en.yml |
| 38 | +name: "National Cheng Kung University" |
| 39 | +address: "No.1, University Road, Tainan City 701, Taiwan (R.O.C)" |
| 40 | +locations: |
| 41 | + - name: "Main Campus" |
| 42 | + coordinates: [22.9987772261614, 120.21648234565666] |
| 43 | + - name: "Guiren Campus" |
| 44 | + coordinates: [22.93788805281445, 120.27485576268575] |
| 45 | +acronyms: ["NCKU"] |
| 46 | +banner: "https://web.ncku.edu.tw/var/file/0/1000/img/495849468.jpg" |
| 47 | +introduction: >- |
| 48 | + National Cheng Kung University was originally established under Japanese colonial government in January 1931 as the Tainan Technical College. |
| 49 | + It was upgraded to a provincial university in 1956 as Provincial Cheng Kung University, named after Koxinga, a Chinese military leader who drove the Dutch East India Company from Taiwan and founded the Kingdom of Tungning. |
| 50 | + In 1971, the university became a national university and was renamed to National Cheng Kung University. |
| 51 | +gallery: |
| 52 | + [ |
| 53 | + "https://web.ncku.edu.tw/var/file/0/1000/img/2638/541084137.jpg", |
| 54 | + "https://web.ncku.edu.tw/var/file/0/1000/img/495849468.jpg", |
| 55 | + "https://web.ncku.edu.tw/var/file/0/1000/img/0111_Sel-044.jpg", |
| 56 | + ] |
| 57 | +``` |
| 58 | +
|
| 59 | +In addition, when this webpage first loads, it will first load the Markers of all universities through a `locations.json`: |
| 60 | + |
| 61 | +```json |
| 62 | +[ |
| 63 | + { |
| 64 | + "name": "National Cheng Kung University", |
| 65 | + "country": "Taiwan", |
| 66 | + "location": [ |
| 67 | + { |
| 68 | + "name": "Main Campus", |
| 69 | + "coordinates": [ |
| 70 | + 22.9987772261614, |
| 71 | + 120.21648234565666 |
| 72 | + ] |
| 73 | + }, |
| 74 | + { |
| 75 | + "name": "Guiren Campus", |
| 76 | + "coordinates": [ |
| 77 | + 22.93788805281445, |
| 78 | + 120.27485576268575 |
| 79 | + ] |
| 80 | + } |
| 81 | + ] |
| 82 | + }, |
| 83 | + { |
| 84 | + "name": "National Taiwan University", |
| 85 | + "country": "Taiwan", |
| 86 | + "location": [ |
| 87 | + { |
| 88 | + "name": "Main Campus", |
| 89 | + "coordinates": [ |
| 90 | + 25.017491194856326, |
| 91 | + 121.53968742646664 |
| 92 | + ] |
| 93 | + } |
| 94 | + ] |
| 95 | + } |
| 96 | +] |
| 97 | +``` |
| 98 | + |
| 99 | +Here's the corresponding commit: [23fa274](https://github.com/university-map/university-map-nextjs/tree/23fa27484967616db8a8aa72c42f3a5e32fa209f). |
| 100 | + |
| 101 | + |
| 102 | + |
| 103 | +After realizing that Ant Design's style didn't quite match the desired effect, I switched the UI to Mantine. Next, I added a vertical navbar on the left side of the screen. Inside the navbar, there's a language picker used to switch between languages with next-intl, and a link to the GitHub repository of this project. The setup for next-intl was done with reference to this easy-to-follow [tutorial](https://www.youtube.com/watch?v=pKolfZFW3gs). |
| 104 | + |
| 105 | +Here's the corresponding commit: [3bfe12a](https://github.com/university-map/university-map-nextjs/tree/3bfe12a2837eea427b7fc1e32b52fe4c094c191b). |
| 106 | + |
| 107 | + |
| 108 | + |
| 109 | +At this point, I believed that the development had reached a milestone, and I was ready to deploy it to GitHub Pages. However, I encountered a critical issue: after the project was built, it wasn't simply a static website. The problem arose from the dynamic routing structure, such as `/:lang/university/:country/:university`, causing the browser to send requests to GitHub Pages' web server each time a route was switched. Additionally, some Next.js functionalities or middleware might require backend processing. As a solution, I decided to rewrite the entire project using Vite + ReactJS. I replaced next-intl with i18next and implemented a hash router. Finally, after these changes, my website could be successfully deployed on GitHub Pages. |
| 110 | + |
| 111 | +Next, I utilized id_ed25519 as the deploy key for the GitHub Pages repository. The GitHub workflow performed the deployment using the following script: |
| 112 | + |
| 113 | +```bash |
| 114 | +echo "$BOT_PRIVATE_SSH_KEY" > id_ed25519 |
| 115 | +chmod 600 id_ed25519 |
| 116 | +ssh-add id_ed25519 |
| 117 | +
|
| 118 | +# Copy the built files to the GitHub Pages repository |
| 119 | +export SITE_HOME="$HOME/site" |
| 120 | +git clone --quiet --depth 1 "git@github.com:university-map/university-map.github.io.git" "$SITE_HOME" |
| 121 | +cp -rf dist/* "$SITE_HOME" |
| 122 | +
|
| 123 | +# Check if there are changes to commit and deploy |
| 124 | +cd "$SITE_HOME" |
| 125 | +if [[ -n $(git status -s) ]]; then |
| 126 | + git add -A |
| 127 | + git commit -m "[GitHub Actions] Deploy university-map/university-map@$GITHUB_SHA" |
| 128 | + git push -q |
| 129 | + echo "Finished Deployment" |
| 130 | +else |
| 131 | + echo "No changes to deploy. Exiting with status 0." |
| 132 | + exit 0 |
| 133 | +fi |
| 134 | +``` |
| 135 | + |
| 136 | +Finally, I added a search bar allowing users to search for keywords from a drop-down list or through commonly used acronyms such as "CMU" to find schools. Here's the corresponding commit: [88b1bb4](https://github.com/university-map/university-map/tree/88b1bb4959f8cd6ab5d7894c5ed1dd1d034ceee2). |
| 137 | + |
| 138 | + |
| 139 | + |
| 140 | +## What's Next? |
| 141 | + |
| 142 | +With the project reaching the first milestone, the journey is far from over. Here are some exciting next steps I'm considering: |
| 143 | +- Expanding the database to include more universities and detailed information such as yearly rankings, colleges, and living and employment environments. |
| 144 | +- Integrating social sharing options such as share and embedded HTML. |
| 145 | +- Improve mobile device display. |
| 146 | + |
| 147 | +That's it for now, folks. Thank you for reading! |
| 148 | + |
| 149 | +[Star University Map on GitHub](https://github.com/university-map/university-map). 🌍🎓🚀 |
0 commit comments