-
CoreShare is a Christmas sharing website which allows users to post anything about their day, their food, good moments, etc. As well as view those submitted by other members. The website design is responsive so it can be used on any device.
-
This is my Milestone Project 3 submission for Code Institute's Diploma in Web Application Development course. My website uses relational databases, features full CRUD functionality and is built using technologies that I have learnt including HTML, CSS, JavaScript, Python, Flask and PostgreSQL/ElephantSQL.
Find the project repository here.
- User experience
- Design
- Wireframes
- Features
- Future Features
- Data Model
- Technologies used
- Testing
- Deployment
- Credits
-
As a first-time user, I want the landing page of the website to explain the purpose of the website and allow me to preview the content.
-
As a first-time user, I want to be able to register for an account.
-
As a first-time user, I want the website to work on any device.
-
As a returning user, I want to be able to log in to my account.
-
As a returning user, I want to be able to create/ view/ edit/ delete my own posts.
-
As a returning user, I want to be able to view other user’s posts.
-
As a returning user, I want recipes to include useful information such as a title, a description of what I intend and pictures is necessary.
-
As a returning user, I want to be able to access and use the website on any device.
-
As a business owner, I want users to be able to create, edit and delete their own posts, but not those of any other user.
-
As a business owner, I want the adding, editing and deleting of posts to be limited to the person who added the post.
-
As a business owner, I want it to be as easy as possible for users to post anything they want.
-
As a business owner, I want the website to function and look good on any device.
- The website design is playful, colourful and youthful. The name ‘CoreShare’ refers to the website’s purpose as a way of sharing. User can register and/or login. Users, can add a post by providing a name, description, they can provide a photo if they want want get to choose from the categories created. On the home page, user can add new categories and/or view posts that have been created for specific categories. They can send the app owner a message, regarding any ideas to improvements, or buggs, and they can terminate their session, by logging out.
A combination of very bright and primary color, to get a litle attencion.!
Google Fonts was used for the following fonts:
- Bruno Ace Sc : was used for the logo at the navbar.
- Ubuntu: was used for the headings
- Oswald: was used for the paragraphs, small texts and spans.
- Sans-serif: used as the fallback font.
- View my Home-Page wireframe.
- View my Intro-Page wireframe.
- View my Posts-Page wireframe.
- View my Contact-Page wireframe.
Nav structure, simple, responsive, compose of an img logo, two nav links, if the user is not logged in, which after becomes four nav links, being those: Home, My Posts, Contact Us and logout.
Footer follows the same principle as the navbar, responsive on all screens, with three sections, the app name, some social links and contact button.
The navbar has only two links, login and register. The page, as centered mid div, compose of the site name logo, a welcome, msg and login button to direct the user to the sign up page, as well as the footer at the bottom with a contact us link in case of some issues.
The home page, is where user can create categories, and those will display on the page,being clickable, and if clicked it opens up a modal where it will display the posts that were created for those specify categories.
The user can create categories, which requests a category name, and an image url, being the image optional, as a default on will be provided.
User can also edit their category, either by changing the name, image, or both.
- The Log in form features input fields for Username and Password. All fields are required.
- The Register and Log in pages both feature forms, a login and register buttons, and a link to the other page incase a user is in the wrong place. E.g. on the Register Page, it says "Already Registered? Log in here."
- The Register form features input fields for Username, First Name, Last Name and Password. All fields are required.
- The user Posts, has a simple intro message, with the their username displayed on top followed by the create posts button. If posts have been created the user will see them displaying through an accordion(from bootstrap) that allows for a collapse effect, toggling the effect will then display the post name, followed by the description and two buttons, one for editing the other for deleting.
- Users can edit the post already created, the fields will be field from the previous post created making it easier to change something more specific.
- Contact page to allow users to send a message, feedback, a comment, some ideas or complains,or simply a hello message, about the app. It has a form requiring a name, a textarea, for the subject, reason they are contacting. After the form submition, a thank you message will display.
- A page to direct user, in case an error, back to the main page, in order to try again, as that may solve the issue encountered.
- In the future, I want to implement a small container on the navbar as well on "My Posts", so that the user may upload their photos, and provide them with flexibility, to style it to their own pleasing, as the page is very simple.
- I hope to implement a comment section, where user may exchange ideas, comments in real time.
- Be able to also include videos, as per the site theme, there would be lot's of videos in need of sharing.
- Implemente a timer from when the user no longer active, to prevent user being always log in.
-
- Heroku is the deployment source I used for this project. I'm also using it for the Postgres relational database
-
- Templating language I've used with Python to add logic to my html templates.
-
- Templating language I've used with Python to add logic to my html templates.
-
- I used jQuery to add functionality to MaterialiseCSS.
-
- Two fonts are imported from google fonts.
-
- I used icons from font awesome on buttons.
-
- Git was used as a version control in the terminal.
-
- Github was used to create and store the project repository.
-
- Gitpod was used to create my files and where I wrote the code.
-
- Balsamiq was used to create Wireframes for the project during the initial planning stage.
-
- TinyPNG was used to compress images for a faster loading time.
-
- Google Chrome's Dev Tools were used while building the project to test responsiveness and for debugging.
-
- Tool used to mock up database structure diagram.
- Main pages
| Intro | Login | Register | Contact | Home | Posts |
|---|---|---|---|---|---|
 |
 |
 |
 |
 |
 |
| * No issues found | * No issues found | * No issues found | * No issues found | * No issues found | * No issues found |
- Add/Edit pages and Css
| Add_category | Edit_category | Add_post | Edit_post | Css |
|---|---|---|---|---|
 |
 |
 |
 |
 |
| * No issues found | * No issues found | * No issues found | * No issues found | * No issues found |
| Script.js | Email.js |
|---|---|
 |
 |
| * Warning: 1 undefined variables -$- . It kept saying that the jquery symbol was undefined, I did search as to why that could be but couldn't find any reason. | * Warnings: 2 undefined variables -$- and emailjs, but sendEmail is link on the base page. |
- Main pages
| Intro | Login | Register | Contact | Home | Posts |
|---|---|---|---|---|---|
 |
 |
 |
 |
 |
 |
| * No issues found | * No issues found | * No issues found | * No issues found | * No issues found | * No issues found |
- Add/Edit pages
| Add_category | Edit_category | Add_post | Edit_post |
|---|---|---|---|
 |
 |
 |
 |
| * No issues found | * No issues found | * No issues found | * No issues found |
- *Note: majority of performance and accessibility, were affected my the extensions I have on the browsers.
The project was created in Gitpod using the Code Institute Gitpod Full Template using these steps:
- Log in to GitHub and go to the Code Institute student template for Gitpod
- Click 'Use this Template' next to the Green Gitpod button.
- Add a repository name and click 'Create reposiory from template'.
- This will create a copy of the template in your own repository. Now you can click the green 'Gitpod' button to open a workspace in Gitpod.
Forks are used to propose changes to someone else's project or to use someone else's project as a starting point for your own idea. By forking the GitHub Repository you make a copy of the original repository on our GitHub account to view and/or make changes without affecting the original repository.
To Fork a Github Repository:
- Log in to GitHub and go to the GitHub Repository
- Locate the Fork button in the top-right corner of the page, click Fork.
- You should now have a copy of the original repository in your GitHub account.
You will now have a fork of the repository, but you don't have the files in that repository locally on your computer.
To make a local clone:
- Log in to GitHub and go to the GitHub Repository
- Above the list of files, click Code.
- To clone the repository using HTTPS, under "Clone with HTTPS", click the 'Copy' icon. To clone the repository using an SSH key, including a certificate issued by your organization's SSH certificate authority, click Use SSH, then click the 'Copy' icon. To clone a repository using GitHub CLI, click Use GitHub CLI, then click the 'Copy' icon.
- Open Git Bash.
- Change the current working directory to the location where you want the cloned directory.
- Type git clone, and then paste the URL you copied earlier. It will look like this, with your GitHub AE username instead of YOUR-USERNAME:
$ git clone https://github.com/YOUR-USERNAME/YOUR-REPOSITORY
- Press Enter. Your local clone will be created.
$ git clone https://github.com/YOUR-USERNAME/YOUR-REPOSITORY
> Cloning into `Third-Milestone-project`...
> remote: Counting objects: 10, done.
> remote: Compressing objects: 100% (8/8), done.
> remove: Total 10 (delta 1), reused 10 (delta 1)
> Unpacking objects: 100% (10/10), done.
You will need to deploy the application using Heroku.
- Create a requirements.txt file by typing
pip3 freeze --local > requirements.txtinto the Gitpod CLI. Ensure this is added to your .gitignore file. - Create a Procfile by typing
echo web: python app.py > Procfile. Open it and ensure it doesn't have a new line, as this can create errors. Ensure it starts with a capital P. - Add and commit these files to Github.
- Go to Heroku. Log in or create an account
- Click the 'New' button and click 'Create new app'.
- Enter a unique name for your project with no capital letters or spaces and select your region. Click 'Create App'.
- Inside your project, go to the Resources tab and create a Heroku Postgres Database
- Inside your project, go to the 'Settings' tab. Scroll down and click 'Reveal Config Vars'.
- Add in the following variables
-
IP : 0.0.0.0
-
PORT : 5000
-
SECRET_KEY : Your_secret_key
- Deploy your project by going to the Deploy tab and choose 'Connect to Github'
- Find your repository name and select Connect.
- To connect your Heroku database, go to 'More' in the top right and select run console. Enter
python3to access the python intepreter. - Then type
From coreshare import db. Then typedb.create_all(). You can then exit the console.
-
Bootstrap: I used this library throughout the project. Particularly for the nav bar, cards, forms and buttons.
-
W3Schools: I referred to guides.
-
Youtube and guides on how to database errors, as I had a few issues when trying to deploy to Heroku.
-
CodeInstitute walkthrough relational database Used the lessons, a multiple couple of times, as I got super confused, with few topcs.
-
Pexels and Google images, so some of the images as well as the default one.
I need to highlight the tutor support team, as for this project, at least for half a dozen times, I had issues, weirdly all mostly regarding deploying to heroku as there were always issues. But all as always sorted. Especially today, almost 4hours trying just to sort the heroku deployment. Thank-you !
Please note this is a personal project. This website is purely for the sake of the developer's portfolio and not for public consumption.
Esmael Pinho, 2023.