An open API service indexing awesome lists of open source software.

https://github.com/kstkolev/flora

Project dedicated to creating a simple RESTful API web app for plants. The tools used for creating the back-end side of this project are the programming language C#, Visual Studio 2022 as IDE, Entity Framework Core and ASP.NET Core. The front-end side of the project is created by using tools such as HTML5, CSS3 and JavaScript's library - React
https://github.com/kstkolev/flora

asp-net-core c-sharp css3 entity-framework-core html html-css-javascript reactjs visual-studio

Last synced: 2 months ago
JSON representation

Project dedicated to creating a simple RESTful API web app for plants. The tools used for creating the back-end side of this project are the programming language C#, Visual Studio 2022 as IDE, Entity Framework Core and ASP.NET Core. The front-end side of the project is created by using tools such as HTML5, CSS3 and JavaScript's library - React

Awesome Lists containing this project

README

          

Guide for successfully cloning and running Flora web application.

STEP 1: Download and install Visual Studio from the official Microsoft website.

STEP 2: After the IDE installation, go to section Code, which is located on a green button around the start of the repository. Click on it.



STEP 3: Copy the presented link from the HTTPS section.



STEP 4: Open the terminal and go to the directory of your choosing. Type git clone and CTRL + V (which pastes the link for the application), and press enter.



STEP 5: Open the folder called "Flora". Inside it you'll find .sln file called "Flora" as well, which opens Visual Studio with the source code for the application.



STEP 6: Click on the https button, which will start the application on a local level.



STEP 7: Two terminals will open. Look at the one that has list of three components. The first one is named "Local". Copy the https URL and paste it into your browser.



LAUNCH:


1) Login Form:


This is the initial page that appears when launching the application: the user login form.


As shown in these pictures, three forms have been created: Login, Registration, and Forgot Password.


They are set up to handle cases of empty user credentials or when incorrect ones are provided.

| ![Image 1](https://github.com/user-attachments/assets/a535bf56-df7c-4dbd-8a8e-d0bfceed9ef0) | ![Image 2](https://github.com/user-attachments/assets/bb483896-5802-4b49-b2c2-2e10cdca2efe) | ![Image 3](https://github.com/user-attachments/assets/b3f144a2-6ec2-4676-8eac-25064a909092) |
|:---:|:---:|:---:|

2) Main page:


This is the page users see after logging in. As shown in the image, there is a navigation bar with four navigation links.


After logging in or clicking the "Main" anchor, the user is navigated to the main page where the wiki articles about nature are posted!


It's a wiki page for nature, meaning that there's a lot of different articles about plants. 😊


When the user clicks on the article, they are taken to the article's page. It contains information about the article and an image showing the appearance of the plant.


At the bottom of the article, the author's name and profile picture are displayed, along with two buttons: Save and Delete (if you are the article's creator).


There's also an algorithm, implemented for managing pagination on the main page. And a search filter for articles, used by typing in an input box located at the top of the page.

| ![Image 1](https://github.com/user-attachments/assets/773768fa-ddb5-4eb5-915a-17ad73c30c24) | ![Image 2](https://github.com/user-attachments/assets/c4f09564-3f3e-4ea3-9310-59789271e799) |
|:---:|:---:|

3) Create Article:


Upon clicking the "Create Article" navigation link, the user is redirected to the article creation section


In this section, he can specify the title, write a description, set the estimated reading time in minutes for the article, and export an image that shows the appearance of the plant.


The page implements an algorithm for managing empty data or data exceeding the limit.

| ![Image 1](https://github.com/user-attachments/assets/c301aa2d-06ed-4413-ae9b-498f7081dcd3) |
|:---:|

4) Account:


Upon clicking the "Account" navigation link, the user is redirected to his account information.


He can view his user credentials and change the default or last exported profile picture.

| ![Image 1](https://github.com/user-attachments/assets/c2a22478-4fb6-4f95-9aff-28a2a11182b0) |
|:---:|

5) Saved Articles:


Upon clicking the "Saved Articles" navigation link, the user is redirected to the page with his saved articles.


This page also incorporates pagination and filtering for articles which the user has saved.


The user can click on his saved articles and read them thoroughly as many times as he wants! 😊


At the bottom of the article section, a button is created to remove the article from the saved collection.