I originally developed this app in WordPress, employing 3rd party plug-ins for search and filtering functionality. Once I felt comfortable in my full-stack development capabilities, I decided to recreate the app in React with added features such as image upload, user login, and price filtering.
When I worked as an architect, I always wished there was an intuitive platform to find details. For example, I can search for a specific past project details, and compare similar details side by side quickly. Websites such as Flaticon and the Noun Project allow users to quickly search for specific downloadable icons, and compare icons visually, but why does no such website exist for the architecture industry? This is why I developed Plan_Charts.
Users can upload a plan or section drawing detail in a uniform square or tile format, and each detail tile is given a Wang Tile marker. Wang Tiles are a set of square tiles proposed by Mathematician Hao Wang that help describe potential configurations. I used Wang Tiles to help users specify the exact details they are looking for. Instead of using cumbersome language such as “I’m looking for an inside corner detail, oriented rightward that continues downward and leftward”, you can specify this symbol below, and retrieve all detail drawings matching this configuration.
vs. “inside corner detail, oriented rightward that continues downward and leftward”
Plan_Chart allows users to filter out drawings from 16 total Wang Tile types as show above, along with the Construction Type, Drawing Type, and Prices for users who want to sell premium content drawings. If the drawing is free, the user can immediately download an Autocad dwg drawing from the product page. Otherwise the premium drawing link becomes available after the user successfully purchases the drawing through Paypal.
Lastly, there is search functionality that queries the drawing title or description from each detail drawing. Plan_Charts aims to build a uniform visual language for the architecture industry.
Skills : React, React Hooks, Axios, Express, MongoDB, Local Storage, PayPal, Multer Image Upload with Amazon AWS S3 Storage, CSS Grid, Pay Pal API, User Token Authentication
