- Technologies
- Testing
- [DB Schema] (#DB-Schema)
- Deployment
- Credits
This Website was created for the sole purpose of completing the third Milestone Project for the Code Institute's Full Stack Developer course. It was built using the knowledge gained from the HTML, CSS, Javascript, Python+Flask and Backend Development with the Flask framework modules. A full list of technologies used can be found in the technologies section of this document.
The live website can be found here.
Localz was built to connect local business and service providers to customers within their localities and beyond. Business and service providers can list their businesses and services on Localz where potential customers can see and reachout to them.
- As a website visitor, I want to easily understand the essence of the site and learn more about the offerings.
- As a website visitor, I want to be able to easily search the website for a business or service within my locality.
- As a website visitor, I want to be able to navigate the website to see listed ads if I choose not to search for specifics.
- As a website visitor, I want to view the website and content clearly on my mobile device.
- As a website visitor, I want to be able to contact the business or service provider from the details on website.
- As a local business or service provider, I want to be able to register on the website.
- As a local business or service provider, I want to be able to login on the website with my registerd details.
- As a local business or service provider, I want to be able to list my business or services on the website.
- As a local business or service provider, I want to be able to manage i.e. edit or delete my listed business ads.
- As a local business or service provider, I want to be able to logout securely on the website after use.
- As a website Admin user, I want to be able to add or delete categories of ads on the website.
- As a website Admin user, I want to be able to manage ads on the website, i.e. delete ads that are deemed inapropriate for the website.
All Pages will contain a Navigation menu at the top of the Webpage that directs them to a new Page to easily allow users to Navigate the site easily. The Nav Menu will be collapsable on a Mobile device to make use of space on smaller devices. The purpose of this is to fulfill user story:
As a website visitor, I want to be able to easily navigate throughout the site to see listed ads.
Custom CSS and/or Materialize Css will be used to make the Website responsive by the use of media queries and/or the Boostrap Grid system.
All pages will be responsive and the layouts will change dependant on screen size. This is to ensure content flow is appealing, images are displayed properly and that the content is not shrunk side by side, so small that it is unreadable. The purpose of this is to fulfill user story:
As a website visitor, I want to view the website and content clearly on my mobile device.
The main colours used are white, blue, cyan, red and amber.
Roboto font is used throughout the project.
- User Signup
- User login
- User ad management
- User logout
- User authentication
- Geolocation feature to enable user search business and services within a certain radius.
- Feedback channel from users on services provided i.e. rating feature.
- Monetise Ad listings i.e. Add payment feature enabled by stripe at signup or place ad page, depends what model I settle on subscription or per ad charge.
- Admin user ability to delete ads from front-end
- HTML
- This project uses HTML as the main language used to complete the structure of the Website.
- CSS
- This project uses custom written CSS to style the Website.
- Javascript
- This project uses javascript to enhance the dynamism and responsiveness of the website
- Python+Flask
- This project is built on Python-Flask Frameworks
- MongoDB
- This project uses MongoDB as database
- Materialize Css 1.0.0
- The Materialize framework is used throughout this website for layouts and styling.
- Font Awesome
- Font awesome Icons are used for the Ad menu icons.
- Google Fonts
- Google fonts are used throughout the project to import the fonts.
- Gitpod
- Gitpod is the Integrated Development Environment used to develop the Website.
- GitHub
- GithHub is the hosting site used to store the source code for the Website and Git Pages is used for the deployment of the live site.
- Git
- Git is used as version control software to commit and push code to the GitHub repository where the source code is stored.
- Google Chrome Developer Tools
- Google chromes built in developer tools are used to inspect page elements and help debug issues with the site layout and test different CSS styles.
- balsamiq Wireframes
- This was used to create wireframes for 'The Skeleton Plane' stage of UX design.
- Techsini
- tecnisih.com Multi Device Website Mockup Generator was used to create the Mock up image in this README
Testing is required on MilestoneProject-3 – Localz Website to ensure all features are working correctly to serve the end users well as intended.
All Features were tested on different screen sizes and devices and all to testers satisfactions.
The live Project can be found here.
All Pages were run through the W3C HTML Validator and showed no errors.
CSS Stylesheet was run through the W3C CSS Validator and showed no errors.
All Python codes were run through the Pep8online checker and satisifies PEP8 compliance.
Website was tested by running locally and tested on the deployed version. No differences found.
-
Ads placed were written to DB but not displayed on web page.
- I re-wrote the code on the ad card and that was fixed.
-
Edit ad page failed to display ad title.
- I updated the ad title jinja and that was fixed.
- The following tables were created in MongoDb with respective fields;
- Business
- category_name
- ad_name
- ad_description
- ad_address
- ad_telephnoe
- created_by
- Categories
- category_name
- Users
- username
- password
- Business
- All tables have objectId by default.
The project was started by navigating to the template and clicking 'Use this template'. Under Repository name I input LOCALZ and checked the Include all branches checkbox. I then navigated to the new repository and clicked the Gitpod extension button on my Github to open the Gitpod editor.
The following commands were used throughout the project:
- git add filename - This command was used to add files to the staging area before commiting.
- git commit -m "commit message explaining the updates" - This command was used to to commit changes to the local repository.
- git push - This command is used to push all commited changes to the GitHub repository.
The Project was deployed for hosting on Heroku with the following steps;
- I created Heroku App for the project
- Connected Git Remote
- Added required packages to requirements.txt
- Freeze requirements.txt
- Added Procfile with Capital 'P'
- Deployed code to Heroku
- Enable Automatic Deploy in Heroku
- Navigate to the GitHub Repository:
- Click the Code drop down menu.
- Either Download the ZIP file, unpackage locally and open with IDE (This route ends here) OR Copy Git URL from the HTTPS dialogue box.
- Open your developement editor of choice and open a terminal window in a directory of your choice.
- Use the 'git clone' command in terminal followed by the copied git URL.
- A clone of the project will be created locally on your machine.
The content of this software was created by Oluwafemi Awosanya with guidance from the Code Institute video lectures, Youtube videos and My Mentor Spencer Barriball
I'd like to thank my mentor Spencer Barriball for his guidance throughout this project.
Thanks to YouTube pages like Traversy Media, Techworld with Nana and Codemy, freecodecamp, their resources has been of immense help.
I'd like to give a special mention to all Code Institute Tutors and the Code Institute Slack Community for a great learning experience in the last 12 months.
© Localz 2021