You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
This is a basic application with the objective of being able to save your notes and have them stored in a database. The user is able to perform basic actions such as create, read, update and delete this data, a basic CRUD.
3
+
This is an web app with the objective of being able to save your notes and have them stored in a database. The user is able to perform basic actions such as create, read, update and delete this data, a basic CRUD.
4
4
5
5
## Table of contents
6
6
@@ -10,28 +10,38 @@ This is a basic application with the objective of being able to save your notes
10
10
-[Backend](#backend)
11
11
-[REST API](#rest-api)
12
12
-[Image gallery](#image-gallery)
13
-
-[Desktop](#desktop)
14
-
-[Mobile](#mobile)
13
+
-[REST API](#rest-api-preview)
14
+
-[Frontend](#frontend-preview)
15
15
16
16
## Built with
17
17
18
18
The project was developed from scratch with Frontend and Backend technologies, for the communication between the client and the server I implemented a REST API, which is responsible for returning the necessary data in JSON format to the client:
19
19
20
20
- Frontend:
21
21
- ReactJS
22
-
- SCSS
23
-
- Styled Components
22
+
- TypeScript
23
+
- TailwindCSS
24
+
- Axios
25
+
- ShadcnUI
26
+
- React Router Dom
27
+
- React Hook Form
28
+
- Zustand
29
+
- React Query
24
30
25
31
- Backend:
26
32
- Python (Flask)
27
33
- SQLite (As database manager)
28
34
- Flask Migrate (To perform migrations)
29
35
- SQLAlchemy and Flask SQLAlchemy (Python SQL toolkit and ORM that gives application developers the full power and flexibility of SQL)
30
36
- REST API (For communication between client and server)
37
+
- SwaggerUI
38
+
- Flask Smorest (Used for rest api creation and schema creation)
39
+
- Flask JWT Extended (For the creation of JWT)
40
+
- MVC (Software Design Pattern)
31
41
32
42
## Project requirements and how to use it
33
43
34
-
For the project you must run both development environments at the same time, both the Frontend and the Backend. In the Frontend you will find JavaScript technologies (ReactJS) and in the Backend you will find Python technologies and tools (Flask), so you must have NodeJS and Python installed on your computer (As a reference this project was developed with version 3.9.6 of Python and 18.12.1 of NodeJS).
44
+
For the project you must run both development environments at the same time, both the Frontend and the Backend. In the Frontend you will find JavaScript technologies (ReactJS) and in the Backend you will find Python technologies and tools (Flask), so you must have NodeJS and Python installed on your computer (As a reference this project was developed with version 3.13.0 of Python and 22.11.0 of NodeJS).
35
45
36
46
I leave you links to NodeJS and Python for installation:
3. That's all for the Frontend, if you haven't run the Backend yet, continue with the next section (Backend)
@@ -103,123 +111,81 @@ $ . venv/bin/activate
103
111
(venv) $ pip install -r requirements.txt
104
112
```
105
113
106
-
3. Now you can start running the server:
114
+
3. Create an .env file and add an environment variable for JWT creation:
115
+
116
+
```shell
117
+
# This is an example
118
+
JWT_SECRET_KEY="c7d57142e46f169ce9dbeb8d96603e46"
119
+
```
120
+
121
+
4. Now you can start running the server:
107
122
108
123
```shell
109
124
(venv) $ flask run
110
125
111
126
# You will see something like this:
112
-
DATABASE_URI is OK!!!
113
-
* Serving Flask app 'application.py'
127
+
* Serving Flask app 'application.py'
114
128
* Debug mode: on
115
129
WARNING: This is a development server. Do not use it in a production deployment. Use a production WSGI server instead.
116
130
* Running on http://127.0.0.1:5000
117
131
Press CTRL+C to quit
132
+
* Restarting with stat
133
+
* Debugger is active!
134
+
* Debugger PIN: 140-954-082
118
135
```
119
136
137
+
5. Visit the path where the Swagger interface is located to see all the api endpoints:
138
+
139
+
`http://localhost:5000/docs`
140
+
120
141
With this you will have your Python environment ready to work, it also has a database so you don't have to worry about that and it already has some data already entered so you can interact with the REST API.
121
142
122
143
But if you want to start blank with no previously stored data delete the database and run the following command to create a new database (This step is optional):
123
144
124
145
```shell
125
146
# This will create a new database with the necessary tables to store the data
126
-
# if you want to know the table structure have a look at the "/flaskr/models.py" file.
147
+
# if you want to know the table structure have a look at the "/flaskr/models" folder.
127
148
(venv) $ flask db upgrade
128
149
```
129
150
130
-
### REST API
131
-
132
-
Everything related to the API is inside `flaskr/api/tasks.py`. The following table summarizes the routes that were implemented:
|`GET`|*/api/tasks*| Return the collection of all tasks. |
137
-
|`GET`|*/api/tasks/id*| Return a single task. |
138
-
|`POST`|*/api/tasks*| Register a new task. |
139
-
|`PUT`|*/api/tasks/id*| Modify the values of a task. |
140
-
|`DELETE`|*/api/tasks/id*| Delete a task from the collection. |
141
-
142
-
The API provides the responses in JSON format that the Frontend needs, plus a pagination method was implemented to not send multiple data and thus not overload the client interface.
143
-
144
-
If you make a `GET` request for all tasks you will see something like this:
145
-
146
-
-`http://localhost:5000/api/tasks`
151
+
After you have done the previous step add some default data for the task labels. Do this by running the following command in the terminal:
147
152
148
153
```shell
149
-
{
150
-
"items": [
151
-
{
152
-
"description": "Just doing some test to finally complete this project! :)",
153
-
"id_task": 1,
154
-
"timestamp": "Tue, 20 Dec 2022 02:25:49 GMT",
155
-
"title": "Test1"
156
-
},
157
-
{
158
-
"description": "Just doing some test to finally complete this project! :)",
159
-
"id_task": 2,
160
-
"timestamp": "Tue, 20 Dec 2022 02:26:02 GMT",
161
-
"title": "Test2"
162
-
},
163
-
{
164
-
"description": "Just doing some test to finally complete this project! :)",
165
-
"id_task": 3,
166
-
"timestamp": "Tue, 20 Dec 2022 02:26:09 GMT",
167
-
"title": "Test3"
168
-
},
169
-
{
170
-
"description": "Just doing some test to finally complete this project! :)",
171
-
"id_task": 4,
172
-
"timestamp": "Tue, 20 Dec 2022 02:26:22 GMT",
173
-
"title": "Test4"
174
-
},
175
-
{
176
-
"description": "Just doing some test to finally complete this project! :)",
177
-
"id_task": 6,
178
-
"timestamp": "Tue, 20 Dec 2022 02:27:23 GMT",
179
-
"title": "Test5"
180
-
},
181
-
{
182
-
"description": "Just doing some test to finally complete this project! :)",
183
-
"id_task": 7,
184
-
"timestamp": "Tue, 20 Dec 2022 04:37:03 GMT",
185
-
"title": "Test6"
186
-
}
187
-
],
188
-
"links": {
189
-
"next": "/api/tasks?page=2&per_page=6",
190
-
"prev": null,
191
-
"self": "/api/tasks?page=1&per_page=6"
192
-
},
193
-
"meta": {
194
-
"page": 1,
195
-
"per_page": 6,
196
-
"total_items": 7,
197
-
"total_pages": 2
198
-
}
199
-
}
154
+
python seed.py
200
155
```
201
156
157
+
### REST API
158
+
159
+
Everything related to the API is inside `flaskr/routes`. The following table summarizes the routes that were implemented:
0 commit comments