Pets Magazine

About the Project

This project is based on the lifestyle articles website. Instead of the Lifestyle topic, I personalized it having the content of pets.

This web app includes the following features:

The user logs in to the app, only by typing the username
The user is presented with the homepage that includes
- Featured article with full-width image and title in the first row. This is an article with the biggest number of votes
- List of all categories in order of priority. Each category is displayed as a square with its name on the top and its most recent article's title at the bottom. The background image is the image of the most recent article in this category
When the user clicks the category name, they can see all articles in that category
- Articles are sorted by most recent
- Each article displays: image, title, truncated text as preview and its author-name
- Add Star button to vote for article (each user can vote only once)
Each page uses the same top menu and footer:
- Top menu includes links to pages that are implemented: Home and Write an article
When the user opens "Write an article" page:
- A form with all necessary fields is displayed

Plus, I added some useful features:

All articles view which is showing all articles
Create a category form that logged in user can create a new category
My favorites view that shows all articles that the current user voted
User's page view that shows all articles that each user posted and in the case of the current user, it shows the account setting buttons including edit and delete user
Applying Responsive Design for all pages so that users can see this website on mobile and tablet.

I followed the guidelines of "liFEsTlye." design, including:

Also, I followed guidelines as below:

Database schema reflects the given structure
Validate all user input to make sure that none with bad intentions can destroy the app
Use Postgres as a database
MVP of the full product (with the full graphical design but only basic features that can be easily extended in the future)

A list of commonly used resources that I find helpful is listed in the acknowledgments.

To get a local copy up and running follow these simple example steps.

On the project GitHub page, navigate to the main page of the repository.
Under the repository name, locate and click on a green button named Code.
Copy the project URL as displayed.
If you're running the Windows Operating System, open your command prompt. On Linux, Open your terminal.
Change the current working directory to the location where you want the cloned directory to be made. Leave as it is if the current location is where you want the project to be.
Type git clone, and then paste the URL you copied in Step 3.
e.g. $ git clone https://github.com/yourUsername/yourProjectName
Press Enter. Your local copy will be created.
To install all dependencies and necessary gems, run bundle installl, yarn install
Run rails db:setup
Run rails server to run rails application in your local server
Run rspec to run rspec tests

👤 Yoko Saka

Contributions, issues, and feature requests are welcome! Feel free to check the issues page.

Give a ⭐️ if you like this project!