Skip to content

Commit c8728f7

Browse files
Readme - app & project presentation (#18)
* Add empty template for README * Write a summary and explanation of the RNN app * Write the Installation and usage of the RNN app * Describe the architecture and include diagrams * Use transparent diagrams for better Dark/Light theme experience * Present the results - GIFs with app usage
1 parent 81438e3 commit c8728f7

8 files changed

Lines changed: 63 additions & 0 deletions

README.md

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
<h1 align="center"> ReactNativeNotes </h1>
2+
<p align="center">
3+
Demo application to create and keep your notes and tasks.
4+
</p>
5+
6+
This project is a demonstration application that should present the abilites and skills of [Callstack.io](https://callstack.com) company in creating React Native Windows **desktop** applications.
7+
8+
The idea behind creating the Notes app was to include some features of Windows and React Native Windows [APIs](https://docs.microsoft.com/en-us/windows/uwp/cpp-and-winrt-apis/consume-apis) but also to create the application that will contain all the most common usage scenarios of an example desktop application.
9+
10+
The development of this application was also a perfect opportunity to mix both React Native (JavaScript) development with the native UWP (C++) features.
11+
It means that beside standard React Native components there is a whole UWP layer which handles all the navigation, animations, and content of a Windows desktop app.
12+
Please check the [Approach](#Approach) section for more details.
13+
14+
15+
---
16+
17+
## Installation & Usage ##
18+
19+
To play with this app
20+
* Make sure to meet all the [System requirements](https://microsoft.github.io/react-native-windows/docs/rnw-dependencies) for React Native Windows development
21+
* Clone the repository
22+
* Launch the terminal and start the app by the following command:
23+
```
24+
npx react-native run-windows --arch x64
25+
```
26+
(or add `--release --no-launch` to the command line to use the Release version)
27+
This will start all the required tools and launch your app
28+
* alternatively you can launch your app through the Visual Studio by opening the solution file in *\<repo root>/windows/ReactNativeNotes.sln* and launching the Debug configuration.
29+
30+
31+
---
32+
33+
## Approach ##
34+
35+
The following application is the combination of skills and features of React Native and UWP development.
36+
37+
There are two main layers of the application:
38+
![](./Resources/GeneralArchitectureDiagramTransparent.PNG)
39+
40+
The first is the UWP layer contains all the XAML Pages of the application.
41+
Those Pages can be navigated between using the [`NavigationView`](https://docs.microsoft.com/en-us/uwp/api/windows.ui.xaml.controls.navigationview?view=winrt-20348).
42+
43+
Each Page can host exactly one separate `Component` implemented on the React Native side.
44+
These components acts as a View for the application.
45+
46+
So in more details, the architecture looks like:
47+
![](./Resources/DetailedDiagramTransparent.png)
48+
49+
So comparing to original React Native Windows where whole application starts from an `index.js` and `App.js`, this solution makes the UWP being a root hosting not an `index.js`, but many `Components`.
50+
51+
52+
53+
---
54+
55+
## Results ##
56+
57+
The application contains two main screens:
58+
* Notes screen - where all the notes are available for all the Create/Read/Update/Delete operations:
59+
![](./Resources/README-notes-CRUD.gif)
60+
![](./Resources/README-notes-resize.gif)
61+
* Tasks screen - where all the tasks are available with calendar date picker for specifying the deadline of a task.
62+
![](./Resources/README-tasks.gif)
63+

Resources/DetailedDiagram.png

16.8 KB
Loading
26.2 KB
Loading
28.8 KB
Loading
45.7 KB
Loading

Resources/README-notes-CRUD.gif

14.4 MB
Loading

Resources/README-notes-resize.gif

10.8 MB
Loading

Resources/README-tasks.gif

835 KB
Loading

0 commit comments

Comments
 (0)