Frontend Project URL: View live project
Backend Project URL: View live project
Backend Project REPO: View live project
User stories were created at the beginning of the project before any actual coding began.
See completed and not completed user stories + testing of user stories here
The colors used for this project are the following: some light blue, pink, yellow, and lime green are also used.
The logo and loader were made by myself, and post images shown in this readme, were taken from rotating backgrounds on my Samsung phone.
Feed page
Network page
Account page
Setting page
Profile page
Post page
| Mobile | Desktop |
|---|---|
| Not Done, but is fully responsive throughout the site. | see wireframes here |
-
- System font is used to save resources and user is already familiar with the font used on system.
-
- The purpose of the images is to make the app more appealing.
- The colors and images all serve to be aligned with and assist in the app's branding.
- The images also intend to give the app an identity the user can relate to, lifting its overall impression.
-
Favicon image:
On top, there's the header; in the middle, the main content area; and at the bottom, the footer. The content is centered with two sidebars that can show related information to the user. The navigation is sticky and will follow the user while scrolling on both mobile and desktop.
Data is structured around the user, the user is the main focus.
What features,(nvp), both ability and desires?
can add content
can add images
can comment
messaging
networking
following
post likes
comment edit
comment delete
search posts
The site's goal is to bring young people together and encourage them to work together to create jobs for themselves. Together, they can begin an adventurous journey.
Throughout the development of Cotal, the concept of reusing components was of high importance, and it is clearly evident that this project displays understanding of the React architecture. This section is to document the reused components.
| Component | Explanation |
|---|---|
| Input.jsx | Allowing to use one <input /> for all text based inputs. |
| Loader.jsx | To display a spinning loader to indicate processing. |
| UserPost.jsx | To display a user post, portfolio, award, certificate and creative. |
| SideBarLeft.jsx | To display the left sidebar on different pages for a three-section page layout. |
| SideBarRight.jsx | To display the right sidebar on different pages for a three-section page layout. |
| SideBar.jsx | To display the left or right sidebar on different pages for a two-section page layout. |
| OneSection.jsx | To display a one-section page layout for non-logged-in users. |
| OneSection.jsx | To display a one-section page layout for logged-in users. |
| ThreeSection.jsx | To display a three-section page layout with left and right sidebars. |
| TwoSectionLeft.jsx | To display a two-section page layout with a left sidebar. |
| TwoSectionRight.jsx | To display a two-section page layout with a right sidebar. |
| Seo.jsx | To inject meta tags to <head> |
| InputEditButton.jsx | To swap between span and input in PersonalDetail.jsx |
| FlipTwo.jsx | To swap between social icons and input in PersonalDetail.jsx |
| Textarea.jsx | To use one <textarea> input in multiple components. |
| UploadSvg.jsx | To use a unified upload icon in multiple locations but with different width and height. |
| SocialInput.jsx | To allow one component to be reused for different social icons. |
| LessThanTwo.jsx | To display a section with one post. |
| LessThanThree.jsx | To display a section with up to two posts. |
| MoreThanTwo.jsx | To display a section with more than two posts. |
| ProfileImageSvg.jsx | To display an avatar icon. |
| Image.jsx | To display an optimized and lazy-loaded cloudinary image. |
| IndexSubmitButton.jsx | To display the form submit button on the index page in Login, Register and Forgot components. |
| InputEditButton.jsx | To display the edit button to allow editing of the personal details objects. |
| ImageInput.jsx | To display a hidden file input. |
| ButtonImageInput.jsx | To display a file input field as an image. |
| ButtonLabelInput.jsx | To display a file input field as a label with an icon. |
| OpenLinkExternal.jsx | To display a button that programmatically opens external links. |
| ServerError.jsx | To display an server error message to the user. |
- Mockup takes a fresh approach by redefining and upgrading novel concepts when it comes to UI & UX sketching. With the creative experience and intuitive touch it offers, it is the perfect app to brainstorm and blueprint your next app design.
- Git was used for version control by utilizing the Gitpod terminal to commit to Git and Push to GitHub.
- GitHub is used to store the project's code after being pushed from Git.
- The fastest way to combine your favorite tools and APIs to build the fastest sites, stores, and apps for the web.
- Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications.
- A utility-first CSS framework packed with classes like flex, pt-4, text-center and rotate-90 that can be composed to build any design, directly in your markup.
- Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress
- Professional photo editing, publishing, graphic design and illustration at your fingertips.
- Yarn is a package manager that doubles down as project manager. Whether you work on one-shot projects or large monorepos, as a hobbyist or an enterprise user, we've got you covered.
- Gatsby enables developers to build fast, secure, and powerful websites using a React-based framework and innovative data layer that makes integrating different content, APIs, and services into one web experience incredibly simple.
- Axios is a simple promise based HTTP client for the browser and node.js. Axios provides a simple to use library in a small package with a very extensible interface.
- nclude popular icons in your React projects easily with react-icons, which utilizes ES6 imports that allows you to include only the icons that your project is using.
- Dotenv is a zero-dependency module that loads environment variables from a .env file into process.env. Storing configuration in the environment separate from code is based on The Twelve-Factor App methodology.
- code formatter
- ESLint statically analyzes your code to quickly find problems. It is built into most text editors and you can run ESLint as part of your continuous integration pipeline.
Testings of user stories
I have grown fond of eliminating bugs found in my code as I intentionally try to provoke and find them. All known bug were fixed.
JS validator through VSCode, eslint.
How to fork this repository:
- Log in to GitHub and navigate to this repository.
- You'll see a button called Fork on the top right side of the page. Click the button to create a copy of this repository to your own GitHub account.
How to clone this project:
- Under the repository’s name, click on the Code button.
- In the HTTPS tap, click on the clipboard icon to copy the given URL.
- In your IDE of choice, open git bash.
- Change the current working directory to where you want the cloned directory to be.
- Type git clone, paste the URL copied from GitHub - https://github.com/MTraveller/cotal-project.git.
- Press enter, and you are done.
First install gatsby-cli.
Then clone the repo if you haven't done so already and install or initiate yarn. Then using the terminal inside the cloned folder write yarn install and yarn will install all dependencies. Thereafter you can do one of the following.
In the base folder, the files .env.development-RENAME and .env.production-RENAME must be edited before using any of the commands below.
yarn start to start the development
yarn build to build an optimized version
yarn serve to serve as production.
To deploy to netlify, simply sign up to netlify and connect your account. Adding and connecting netlify with your repo will automatically deploy this project on netlify.
Remember to add GATSBY_API_URL environment variable to the backend api url.
React Docs
Gatsby Docs
Reach router Docs
Mozilla Docs
No code within this project is a copy unless specified explicitly in the source code—Code Institute provided the base template for this project. The sources used above provided guidance throughout the development.
This project is part of the "Full Stack Software Developer Diploma" at Code Institute.
MT 2022.