# Building a Weekly Planner App with ReactJS + FullCalendar: Project Setup (Part 1)
**GOAL**: Create a weekly calendar app where one can plan and schedule tasks. Integrations with Google Calendar and task apps.
*Note: I will be using* [*Astro.build*](http://Astro.build)*, but the basic concepts of this tutorial should work with any other setup (Vite, CRA, etc.).*
Part 1 covers project setup and creating a basic calendar component.
---
## Setting up Astro + React + FullCalendar
First, let's set up Astro with the following command:
```bash
npm create astro@latest
```
Follow the steps in the command prompt. Choose "Empty" when asked, "How would you like to start your new project?", "Yes" for installing dependencies, and "No" for TypeScript.
Next, we need to add ReactJS. Move into the folder that was created when you initiated the project, then run the `astro add react` command.
```bash
cd your-project-folder
npx astro add react
```
Choose "yes" if prompted with a y/n question.
Finally, we need to install the FullCalendar packages we need. Run the following command:
```bash
npm install \
@fullcalendar/core \
@fullcalendar/react \
@fullcalendar/timegrid \
@fullcalendar/interaction
```
`@fullcalendar/core` and `@fullcalendar/react` are quite self-explanatory as to what they contain. `@fullcalendar/timegrid` is a specific plugin we'll be using to create our calendar app.
---
## Initial Calendar Component
Currently, your `src` folder should only contain one other folder - `pages`. Create a `src/components` folder with an empty `Calendar.jsx` file. Inside this `Calendar.jsx` file, we will create a Calendar component.
First, we want to import `React` and `FullCalendar`, along with the initial plugin we'll be using.
```javascript
// src/components/Calendar.jsx
import React from "react";
import FullCalendar from "@fullcalendar/react";
import timeGridPlugin from "@fullcalendar/timegrid";
```
Next, let's create the basic component:
```javascript
// src/components/Calendar.jsx
// ...
class Calendar extends React.Component {
render() {
return (
);
}
}
export default Calendar;
```
Let's use this component. Make the following changes to your `index.astro` page:
```diff
---
+ import Calendar from "../components/Calendar";
---
Astro
-
Astro
+
```
Now if you start your app using the `npm run dev` command, you should see something like this:
[![Blank FullCalendar instance](https://res.cloudinary.com/practicaldev/image/fetch/s--k7JXLlR1--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1nuq3095tc43uth9pv04.png align="left")](https://res.cloudinary.com/practicaldev/image/fetch/s--k7JXLlR1--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1nuq3095tc43uth9pv04.png)
---
You can find all the code at [klickers/ct-calendar](https://github.com/klickers/ct-calendar).