As my October project, Xunwei (寻味) website is fully re-designed and re-programmed. The initial motivation is the daily PV of the old website, which is no longer maintained, while there are still many visitors from mainland China and the US. Also, I often found it very hard for me to get notified by restaurant information, so that it is quite difficult for me to get something really wonderful in the New York City.
Kill the old
The old website, introduced in my previous post, was built based on Django 1.6 MVC framework, using a lot of third-party libraries, some of which are no longer maintainer and some of which are poorly designed. The main reason is that it was my first real-world web project, and I enjoyed and learned really a lot from that project. Also, the website was hosted on Webfaction (server, database and static files), making it extremely slow in China.
Moreover, since I used Django’s MVC framework, the front-end and the backend were mess together. In an old traditional way, the website was well built, but was hard to maintain.
Finally, the data of Xunwei were all businesses’ info crawled from several other websites, which are not appealing and useless.
Based on that, my plan to upgrade the website are as follows:
Separate the front-end and the back-end. Use Django as the backend and only provides API services Use Incapsula or CloudFlare CDN service to cache dynamic content and accelerate the APIs, and use Memcached to cache the server Move front-end stuff to AWS S3 and use Amazon’s CloudFront service to cache Clean the database and focus on the valuable reviews of the restaurants instead of Yelp-like meta info Create a Wechat robot to provide better services
The front-end is based on React. I have to say that once touching React, it is almost impossible to get away from it. However, one of the challenges I faced in developing is that as the size of the project grows, it is difficult to maintain different statuses of the controllers. I don’t really like the complicated Flux since there are not many things need to be stored.
To solve user authentication issue, I used JWT(JSON web token) to imitate the session’s behavior. One of the pros is that no need to create a session’s table in the database and maintain it.
Python is still my favorite language for now. The new website will concentrate on the valuable and long reviews people wrote. Since this is my side project, I don’t have much time to add new post every day. Therefore it is a good idea to create a backend that handles POST request and use Slack/Hubot to send the data.
Xunwei has a official account on Wechat that allows users to send request to Xunwei and search for reviews/restaurants. Imagine you have a special contact in your phone, you can send your location to it and get recommended restaurants immediately. Is that cool? That’s what Xunwei robot can do.
As a information website like Xunwei, the SEO is a big issue. Using react-router’s pushState can remove the hashtag in the URL, while it is not easy for search engines to get the data. My solution is to use noscript tag, putting everything that are not included in the page in it generated by Django backend and push it. The search engine will see things in noscript, while the user will see React app.
The entire project is open source on Github: https://github.com/fuermosi777/xunwei-website